<标签名 属性1=“属性值1” 属性2=“属性值2”……>文本</标签名>

文本操作

  1. <div class="c1"><span>click</span></div>
  3. <script>
  5.     var ele =document.querySelector(".c1");
  7.     ele.onclick = function (){
  8.         // 查看标签文本
  9.         console.log(this.innerHTML)
  10.         console.log(this.innerText)
  11.     }
  13.     ele.ondblclick = function (){
  14.         // 设置标签文本
  15.         this.innerHTML = "<a href='#'>mf</a>"
  16.         //this.innerText = "<a href='#'>mf</a>"
  17.     }
  19. </script>

value操作

像input标签，select标签以及textarea标签是没有文本的，但是显示内容由value属性决定。

  1. <input type="text" class="c1" value="hello world"><button class="btn">change</button>
  3. <select name="" id="i1">
  4.     <option value="shandong">山东省</option>
  5.     <option value="hebei" selected="selected">河北省</option>
  6.     <option value="hunan">湖南省</option>
  7. </select>
  8. <button class="btn2">change2</button>
  11. <p><textarea name="" id="i2" cols="30" rows="10">mf</textarea></p>
  13. <script>
  15.     // input标签
  17.     var ele1 = document.querySelector(".c1");
  18.     console.log(ele1.value);
  19.     ele1.value = "hello JS!";
  21.     var btn = document.getElementsByClassName("btn")[0];
  22.     btn.onclick = function () {
  23.         // alert(123)
  24.         // ele1.value = "hello JS!";
  25.         console.log(this.previousElementSibling);
  26.         this.previousElementSibling.value = "hello JS!";
  27.     };
  29.     // select标签
  30.     var ele2 = document.querySelector("#i1");
  31.     console.log(ele2.value);
  32.     var btn2 = document.getElementsByClassName("btn2")[0];
  33.     btn2.onclick = function () {
  34.         ele2.value = "shandong"
  35.     };
  37.     // textarea标签
  38.     var ele3 = document.querySelector("#i2");
  39.     console.log(ele3.value);
  40.     ele3.value = "welcome to JS world!"
  42. </script>

css样式操作

  1. <p id="p1">Hello world!</p>
  3. <script>
  4.     var ele = document.getElementById("p1");
  5.     ele.onclick = function (){
  6.         this.style.color = "red"
  7.     }
  8. </script>

属性操作

出于历史原因，操作属性不能总是通过 ele.xxx的形式，下面这种形式更为通用。

  1. elementNode.setAttribute("属性名","属性值")    
  2. elementNode.getAttribute("属性名")       
  3. elementNode.removeAttribute("属性名");

并不是所有属性都可以像value那样操作。

  1. <div class="c1" id="i1" k1="v1" value="xxx">hello JS</div>
  3. <script>
  5.    var ele = document.querySelector(".c1");
  7.    // console.log(ele.value);
  8.    console.log(ele.getAttribute("k1"));
  9.    console.log(ele.getAttribute("value"));
  10.    ele.setAttribute("k2","v2");
  11.    ele.removeAttribute("k1");
  13. </script>

class属性操作

有了getAttribute、setAttribute、removeAttribute这种属性操作的通用方法，还要继续讲解class呢？
class属性是用的最多的、也是很重要的属性，因此语法重新设计的更简洁。

  1. elementNode.className  // 当前css类
  2. elementNode.classList.add  // 添加css类
  3. elementNode.classList.remove  // 删除css类
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style>
  8.         .c1{
  9.             background-color: rebeccapurple;
  10.         }
  12.         .c2{
  13.             color: red;
  14.         }
  16.         .hide{
  17.             display: none;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  23. <div class="c1">hello JS</div>
  26. <script>
  27.     var ele = document.querySelector(".c1");
  28.     ele.onclick = function () {
  29.         // this.setAttribute('class', 'c1 c2')
  30.         // this.classList.add("c2");
  31.         this.classList.add("hide");
  32.     }
  33. </script>
  35. </body>
  36. </html>

节点操作

  1. // 创建节点：
  2. document.createElement("标签名")
  3. // 插入节点
  4. somenode.appendChild(newnode)             // 追加一个子节点（作为最后的子节点）
  5. somenode.insertBefore(newnode,某个节点)   // 把增加的节点放到某个节点的前边
  6. // 删除节点
  7. somenode.removeChild()：获得要删除的元素，通过父元素调用删除
  8. //替换节点
  9. somenode.replaceChild(newnode, 某个节点);