DOM编程操作

DOM：

JS用document操作网页 Document Object Model 文档对象模型

获取元素，也叫标签：

      有很多API：

window.idxxx或者直接 idxxx

document.getElementById('idxxx')                             IE

document.getElementsByTagName('div')[0]                IE

document.getElementsByClassName('red')[0]              IE

document.querySelector('#idxxx')                              新的

document.querySelectorAll('.red')[0]                           新的

---

获取特定的元素：

获取HTML元素：document.documentElement

获取head元素：document.head

获取body元素：document.body

获取窗口（窗口不是元素）：window

获取所有元素：document.all

document.all不是对象，是一个数组，存在的话是IE浏览器，不存在的是其他浏览器。

---

看div的结构：

console.dir( )

---

节点node包括以下几种：

1表示元素Element，也叫标签Tag

3表示文本Text

8表示注释Comment

9表示文档Document

11表示文本片段DocumentFragment

---

节点的增删改查：

增：

创建一个标签节点：

let div1 = document.createElement('div')

document.creatElement('style')

document.creatElement('script')

document.creatElement('li')

创建一个文本节点：

text1 = document.createTextNode('你好')

标签里面插入文本：

div1.appendChild(text1) node提供的接口

div1.innerText='你好'或者div1.textContent = ‘你好’ Element提供的接口

但是不能用div1.appendchild('你好')

插入页面：

创建的标签默认处于JS线程中

必须把它查到head或者body里面，他才会生效

document.body.appendChild(div)

或者

已在页面中的元素.appendchild(div)

一个元素不能出现在两份，除非cloneNode 克隆节点

---

删：

旧方法：parentNode.childChild(childNode) IE

新方法：childNode.remove() 不兼容IE

两种方法并不完全删除，只是移到内存里去了，完全删除将其赋值为null

---

改：

写标准属性：

改class：div.className = 'red blue' ( 把之前的全覆盖 )

div.classList.add('red')                 （新的，不会覆盖）

改style：div.style = 'width:100px; color:biue;'

改style一小部分：div.style.width：'200px'

大小写：div.style.backgroundColor = 'white'

改data- * 属性：div.dataset.x = 'frank'

读标准属性：

div.classList/a/href

div.getAttribute('class')/a.getAttribute('href')

改事件处理函数：

div.onclick默认为null

默认点击div不会有任何事情发生

但是如果你把div.onclick改为一个函数fn

那么当你点击div的时候，浏览器会调用这个函数

并且是这样调用的fn.call(div,event)

此时div会被当做this

event则包含了点击事件的所有信息，如坐标等

改文本：

div.innerText = ' xxxx' 或者 div.textContent = 'xxxx'

改HTML内容：

div.innerHTML = '<strong>重要内容</strong>'

改标签：

div.innerHTML = " //先清空

div.appendChild(div2) //再加内容

---

查：

查爸爸：

node.parentNode 或者 node.parentElement

查爷爷：

node.parentNode.parentNode

查子代：

node.childNodes 或者 node.children     前者node会包含空格    后者不会

查兄弟姐妹：

node.parentNode.childNodes                还要排除自己

node.parentNode.children            还有排除自己

查看老大：

node.firstChild

查看老幺：

node.lastChild

查看上一个哥哥：

node.previousSibling

查看下一个弟弟：

node.nextsibling