网页其实是一棵树
JS如何操作这棵树
浏览器往window上加一个document即可
概念：JS用document操作网页——这就是Document Object Model 文档对象模型DOM
DOM API 获取元素，也叫标签
- window.idxxx 或者直接idxxx 前提：id不能跟全局属性冲突
- document.getElementByld('idxxx')
- document.getElementsByTagName('div')[0]
- document.getElementsByClassName('red')[0] 以上三个不好用，需兼容IE的时候才需要
- document.querySelector('#idxxx')
- document.querySelectorAll('.red')[0] 这两个常用
获取特定元素
- 获取html元素：document.documentElement
- 获取head元素：document.head
- 获取body元素：document.body
- 获取窗口（窗口不是元素）：window 用于全局监听
- 获取所有元素：document all IE发明 目前只能在ie里运行，在chrome等浏览器里是假值（第6个falsy值）
if(document.all){console.log('ie浏览器');只能在ie里运行}
else{console.log('其他浏览器');只能在非ie运行}
获取的元素是个啥
显然是个对象，我们需要搞清它的原型
- Element 包含HTMLElement，XMLElement等不同标准的元素
- Node 节点
节点？元素？区别
节点Node包括以下几种
- MDN有完整描述developer.mozilla.org/zh-CN/docs/…
- x.nodeType得到一个数字
- 1 表示元素Element，也叫标签Tag
- 2 表示文本Text
- 8 表示注释Comment
- 9 表示文档Document
- 11 表示文档片段 DocumentFragment
- 记住1和2即可
1个div有六层原型
节点的增删改查
增
创建一个标签节点
- let div1 = document.createElement('div')
- document.createElement('style')
- document.createElement('script')
- document.createElement('li')
创建一个文本节点
- text1 = document.createTextNode('你好')
标签里面插入文本
- div1.appendChild(text1) node原型提供的接口
- div1.innerText = '你好'或者div1.textContent = '你好' Element原型提供的接口
- 但是不能用div1.appendChild('你好')
插入页面里
- 你创建的标签默认处于JS线程中
- 必须把它插到head或者body里面，他才会生效
- 使用document.body.appendChild（div）或者已在页面中的元素.appendChild(div)
appendChild
- 代码
- 页面中有div#test1和div#test2
let div = document.createElement('div')
test1.appendChild(div)
test2.appendChild(div)
-请问最终div出现在哪里？
- 1.test1里面
- 2.test2里面
- 3.test1里面和test2里面
- 答案：test2里面
- 一个元素不能出现在两个地方，除非复制一份
- 复制用cloneNode()
删
两种方法
- 旧方法：parentNode.childChild(childNode)
- 新方法：childNode.remove()IE不兼容
- 使用appendChild使之回到页面中
改属性
写标准属性
- 改class：div.className = 'red blue'（全覆盖）
- 改class：div.classList.add('red')（改部分）
