DOM1. 查找元素 2. 操作元素的属性 3.操作元素样式 4.操作元素类名 5.节点孩子节点第二个是第一个节点，

1. 查找元素

// getElementById()  返回匹配指定 id 的一个元素。
  <div id="d1">我是一个div标签</div>
  <script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
  </script>
  
// getElementsByTagName()  返回一个`HTMLCollection`(伪数组)，包含匹配指定标签名的所有元素。
  <p>我是p标签</p>
  <p>我是p标签</p>
  <p>我是p标签</p>
  <script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
  console.log(p);
  </script>
  
// getElementsByClassName()  返回一个HTML集合`HTMLCollection`(伪数组)，
//                           包含匹配指定类名的所有元素。
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');
  console.log(div);
</script>

// document.querySelector() 返回文档中匹配指定的CSS选择器的第一元素
  <div id="div1">我是一个div</div>
  <div id="div1">我是一个div</div>
  <script>
  document.querySelector("#div1").innerHTML = "Hello World!";
  </script>

// document.querySelectorAll()  返回文档中匹配的CSS选择器的所有元素节点列表
<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = '我是新的div';
</script>

2. 操作元素的属性

// 元素自带属性
 <div id="d1">我是一个div标签</div>
    <input type="text" id="d2">
    <img src="" id="d3" alt="">
  <script>
    d1.innerHTML = "123"
    d2.type = "password"
    d3.src = "	https://m.360buyimg.com/babel/jfs/t1/191178/7/40736/24752/654459bbF3c494a4e/4e78e3e656e12a5a.png"
  </script>
  
//  自己定义属性
//  setAttribute('属性','值') getAttribute('属性') removeAttribute('属性') 
    d1.setAttribute("zcw","459")
    console.log(d1.getAttribute("zcw"))
    d1.removeAttribute("zcw","459")
    
// 通过 ‘data-属性名’ 方式自定义属性
<div data-index='2'></div> 'data-'是自定义属性的前缀，便于区分自定义属性和内置属性
console.log(d1.dataset)  // 提取
d1.dataset.zcw = "456"   // 设置自定义标签
delete d1.dataset.zcw    // 删除标签

3.操作元素样式

<style>
       div{
           height: 100px;
           background-color: yellow;
       }
   </style>
// 只能行内样式方法 style --读写
    <div id="d1" style="width: 100px; color: black;">zcw </div>
   <script>
     console.log(d1.style.width)
     console.log(d1.style.color)
   </script> 
// 内部样式，外部样式，行内 getComputedStyle 获取，不能赋值写样式 
    <div id="d1" style="width: 100px; color: black;">zcw </div>
   <script>
   var box = document.getElementById("d1")
   var res = getComputedStyle(box).width
   console.log(res)
   </script>

4.操作元素类名

// className 可以一次设置多个样式 
    <div id="d1" class="item1 item2 item3">zcw </div>
    <script>
        d1.className = "item1" //class 只有item1 
    </script>    
    
 // classList 一个一个改
     <div id="d1" class="item1 item2 item3">zcw </div>
    <script>
       console.log(d1.classList)
       d1.classList.add("item4")
      d1.classList.remove("item1")
    </script>    
    
 //  toggle 转换 
     <div id="d1" class="item1 item2 item3">zcw </div>
    <button id="btn">转换</button>
    <script>
        btn.onclick = function(){
            d1.classList.toggle("item")
        }
    </script>  （没有这个名的情况下 按一下按钮有，再按无）