一：获取元素节点的方式（兼容低版本浏览器比如ie8 以及以下）

（1）通过ID属性获取到元素节点

document.getElementById(元素节点的ID);

（2）通过class属性获取到元素节点 getElementsByClassName是获取到元素的集合

   document.getElementsByClassName(类名);

通过下标来选取对应的元素

 document.getElementsByClassName('classdom')[1] )

（3）通过标签名获取到元素节点 getElementsByTagName也是一个元素集合

  document.getElementsByTagName(标签名);  
  document.getElementsByTagName('div')[2] )

适合用于高版本浏览器

1：通过querySelector获取含有指定id选择器的元素

  document.querySelector('#dom1')

2：通过querySelector获取含有指定class选择器的元素含有相同class的元素有很多，但是只获取第一个

 document.querySelector('.classdom')

3：使用querySelectorAll可以获取多个含有对应元素选择器的dom元素

    使用querySelectorAll可以获取多个含有对应类选择器的dom元素 
    通过下标可以选择第几个 
  console.log( document.querySelectorAll('.classdom')[2]

二：操作HTML

1：document.write 改变HTML输出流

2：对象.innerHTML=新的HTML 改变HTML的内容

案列：

     <button onclick="fn()">点我</button>
     <div id="dom1" class="cname"> 平安夜是个黑暗的夜晚 </div>
      function fn(){
      let d = docunment.getElmentById('dom1')
      d.innerHTML='<h1>我是</h1>'
      d.innerText='我是'
 运行点击点我 平安夜是个黑暗的夜晚 替换成我是

innerText 也会替换原来的内容只能把文字显示在对应的页面上，无法转义标签元素 innerHTML 支持标签转义，替换原来的内容

当div有多个，获取id class 无法获取对应的和去修改因为标签和class获取到的元素的集合通过集合的方式直接去修改是改不了的 document.querySelectorAll也不可以

   <div id="dom1" class="cname"> 平安夜是个黑暗的夜晚<img src="" alt="" datasrc=""> </div>
  <div class="cname"> 平安夜是个黑暗的夜晚   </div>
    <div class="cname"> 平安夜是个黑暗的夜晚   </div>

        只能通过循环遍历的方式去修改
        let ds = document.getElementsByClassName('cname')
         for(var i=0;i<ds.length;i++){
            ds[i].innerHTML = '<h1>平安夜平安</h1>'
         }

3：对象.atlribute=新的属性值

  <button onclick="fn()">给图片设置属性值</button>
  <button onclick="getfn()">获取图片的属性值</button>
  <div id="dom1" class="cname"> 平安夜是个黑暗的夜晚<img src="" alt="" datasrc=""> </div>
  
  （给图片设置属性值）
  function fn(){
      * 使用document.querySelector可以使用后代选择器 */
        /* 使用变量存起来的方式 不用每次都再找一遍 性能更好 */
          let img = document.querySelector('#dom1 img');
       img.src = "图片的路径地址/网址"
        /* 宽高不可以使用px单位 */
        img.width = '200'
        img.height = '200'
        /* dom元素.的方式 设置值，只能设置在元素身上原来就有的属性
        比如 src 比如 alt width height */
        /* 自定义的属性 在元素上 是不会体现出值 */
        /* 但是这种方式 类似于 在对象上添加了一个属性datasrc，
        属性的值是123 */
        /* img dom document object model */
        img.datasrc = '123'
        img.alt = '图片加载中'

  （获取图片的属性值）
  function getfn(){
        console.log('图片的src',img.src);
        console.log('图片的alt',img.alt);
        console.log('图片的width',img.width);
        console.log('图片的height',img.height);
        /* 获取自定义的属性值 */
        console.log(img.datasrc); 可以显示出数值
    }

三：节点属性

高版本的浏览器可以识别 firstElementChild和firstChild的区别是忽略空格和换行直接获取元素节点中间带Element的选择节点属性也是忽略空格和换行直接获取元素节点*/

1：parentNode 返回节点的父节点 childNodes 返回子节点集合只返回子节点如果存在空格或者换行也会被算成一个子节点

firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastChild 返回节点的最后一个子节点

nextSibling 下一个节点

previousSibling 上一个节点

lastElementChild 返回节点的最后一个子节点

nextElementSibling 下一个节点

previousElementSibling 上一个节点

  let div = document.querySelector('div');
    
    let c = div.childNodes;
    console.log(c);
    c[1].style.background = 'red'
    c[1].style.fontSize = '20px'

    c[3].style.background = 'green'
    
    c[5].style.width = '200px'
    c[5].style.height = '100px'
    c[5].style.background = 'blue'
    
 let li = document.querySelector('li');
  parentNode	返回节点的父节点 
 console.log(li.parentNode);
   选择器 选择到li 通过查找父节点的方式 把他的父节点   
  li.parentNode.style.width = '100px'
    li.parentNode.style.height = '100px'
 li.parentNode.style.background = 'red'

dom

一：获取元素节点的方式（兼容低版本浏览器 比如ie8 以及 以下 ）