DOM(document object model)的节点操作

DOM全称document object model，是当网页被加载时，浏览器会创建页面的文档对象模型。

js提供了一个document对象，指向的是HTML，在js中通过document对象可以直接或者间接获取页面内容对应的标签。

节点就是标签。

1 直接获取节点

1. 通过id属性值获取标签document.getElementById(id属性值)

   <div id='btn'></div>
   document.getElementById('btn')
   

2. 通过class属性值获取标签document.getElementByClassName(class属性值)

   <div class='btn'></div>
   document.getElementByClassName('btn')
   

3. 通过标签名获取标签 document.getElementsByTagName(标签名)

   <div></div>
   document.getElementsByTagName('div')
   

2 获取父节点

1. 获取指定节点的父节点——节点.parentElement

   document.getElementById(id).parentElement('p')
   

3 获取子节点

1. 获取指定节点的所有子节点——节点.children

   document.getElementById(id).children('div')
   

2. 获取指定节点的第一个子节点——节点.firstElementChild

   document.getElementById(id).firstElementChild('div')
   

3. 获取指定即点的最后一个子节点——节点.lastElementChild

   document.getElementById(id).lastElementChild('div')
   

4 创建节点

1. 创建新的节点document.createElement(标签名)

    a=document.createElement("p")
   

5 添加节点

1. 节点1.appendChild(节点2)

   div = document.getElementById("div")
   div.appendChild(a)
   

   在节点1的最后添加节点2（节点1和节点2是父子关系），将新元素添加到尾部。

2. 节点1.insertBefore(节点2,节点3)

   document.getElementById(id).insertBefore(a,b)
   

   在节点1中节点3的前边添加节点2。

6 移除节点

1. 节点1.removeChild(a)

   document.getElementById(id).removeChild('p')
   

7 修改文字和属性

1. 标签内部的文字（子标签也属于文字）
   节点.innerText

   document.getElementById(id).innnerText='你好'
   

2. 修改 HTML 内容的最简单的方法是使用 innerHTML 属性
   document.getElementById(id).innerHTML=新的 HTML

   document.getElementById(id).innerHTML=新的 HTML
   

3. 改变 HTML 元素的属性
   document.getElementById(id).attribute=新属性值