JS 编程接口之 DOM 编程-一一网

DOM 简介

网页其实是一棵树

JS如何操作这棵树

浏览器往window上加一个document即可，JS用document操作网页，这就是Document Object Model 文档对象模型。

API

获取元素，也叫标签

有很多API

window.idxxx	//或直接 idxxx，最简单的方法，但有时会有冲突

document.getElementByld('idxxx')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('red')[0]//这三种方法复杂不常用

document.querySelector('#idxxx') //注意加#号
document.querySelectorAll('.red')[0]//这两种方法是常用的
复制代码

获取特定元素

获取html元素

document.ducumentElement

获取head元素

document.head

获取body元素

document.body

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

window

获取所有元素

document.all

document.all是ie发明的，是第6个falsy值。

元素的6层原型链

我们获取到的元素是一个对象，所以需要搞清楚它的原型。

console.dir(div1)看原型链——

第一层原型

HTMLDivElement.prototype，这里面是所有div共有的属性。

第二层原型

HTMLElement.prototype，这里面是所有HTML标签共有的属性。

第三层原型

Element.prototype，这里面是所有XML、HTML标签的共有属性（浏览器不止展示HTML）

第四层原型

Node.prototype，这里面是所有节点的共有属性，节点包括XML标签文本注释、HTML标签文本注释等等。

第五层原型

EventTarget.prototype，里面最重要的函数属性是addEvenListener

第六层原型

Object.prototype

div 原型链

节点

节点和元素的区别

Node？Element？

节点Node包括以下几种，其中就包括Element

MDN有完整描述，x.nodeType得到一个数字。

节点的增删改查

增

创建一个标签节点

let div1 = document.createElement('div')
document.createElement('style')
document.createElement('script')
document.createElement('li')
复制代码

创建一个文本节点

text1 = document.createTextnode('你好')
复制代码

标签里面插入文本

div1.appendChild(text1)
div1.innerText='你好'
或
div1.textContent='你好'
//不能用 div1.appenChild('你好')
复制代码

插入页面中

创建的标签默认处于JS线程中，必须把它插到head后者body里面，它才会生效。

document.body.appendChild(div)

或者

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

appendChild题目
页面中有 div#test1 和 div#test2
let div = document.createElemnt('div')
test1.appendChild(div)
test2.appendChild(div)
复制代码
请问最终div出现在哪里？

=> test2 里面，一个元素不能同时出现在两个地方，除非复制一份。

删

两种方法

旧方法：parentNode.removeChild(childNode)

新方法：childNode.remove() //ie不支持
思考

如果一个node被移出页面（DOM树），那么它还能再次返回页面中吗？

可以。

怎样删除node呢？

div = null

改

改属性

改标准属性

改id
```
div1.id = 'div1'
复制代码
```

改class

//class是JS保留字，不能直接用div1.class
div1.className = 'blue'	//会全覆盖，想再添加只能 div1.className += ' red'
div1.classList.add('green')	//class = "blue red green"
复制代码

改style
```
div1.style = 'width: 100px; color: blue;'
div1.style.width = '200px'	//改style的一部分
复制代码
```
当改动类似于background-color这种有中划线的属性时，改写为div1.style.backgroundColor就可以执行。
改data-* 属性
```
div1.dataset.x='river'
复制代码
```

读标准属性

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.addEventListener
  
  是div.onclick的升级版

改内容

改文本内容

div.innerText = 'xxx'
div.textContent = 'xxx'
//两者几乎没有区别
复制代码

改HTML内容

div.innerHTML = '<strong>重要内容</strong>'
复制代码

改标签

div.innerHTML = ''	//空字符串，先清空
div.appendChild(div2)	//再改内容
复制代码

改爸爸
```
newParent.appendChild(div)
复制代码
```

查

查爸爸

node.parentNode
或
node.parentElement
复制代码

查爷爷
```
node.parentNode.parentNode
复制代码
```
查子代
```
node.childNodes
或者
node.children
复制代码
```
- 第一个问题：
  
  下面console.log(test.childNodes.length)打印结果为7，依次为text，li，text，li，text，li，text。
  
  text是回车+空格
  
  因此下面这个打印结果就是3
  
  用children就可以避免这种情况，多用children！！
- 第二个问题：
  
  当子代变化时，两者也会实时变化吗？
  
  会实时变化。
  
  而document.querySelectorAll('li')就不会实时变化
查兄弟姐妹
```
node.parentNode.childNodes	//还要排除自己
node.parentNode.children	//还要排除自己
复制代码
```
也就是要做两件事情，第一件是上面的找到parent的孩子，第二件就是遍历这个数组并且排除自己。

操作示例：

div1的parent共有35个孩子

通过遍历并排除掉div1自己，得到自己的兄弟姐妹数组siblings
查看老大
```
node.firstChild
复制代码
```
查看老幺
```
node.lastChild
复制代码
```

查看上一个哥哥/姐姐

node.previousSibling	//有可能会查看到文本节点
node.previousElementSibling
复制代码

查看下一个弟弟/妹妹

node.nextSibling
node.nextElementSibling
复制代码

遍历一个div里面的所有元素

travel = (node,fn) => {
	fn(node)
	if(node.children){
		for(let i = 0; i < node.children.length; i++){
			travel(node.children[i],fn)
		}
	}
}
travel(div1,(node) => console.log(node))
复制代码