DOM编程
DOM其实是一棵树
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width = device - width,initial - scale = 1.0 "> <title>标题</title> </head> <body> <header> <h1>文字1</h1> </header> <main> <h2>文字2</h2> <p>文字3 <span>文字4</span> 文字5</p> </main> </body> </html>
JS如何操作这棵树
浏览器往window上加一个document即可
JS用document操作网页
这就是Document Object Model 文档对象模型
DOM确实难用
获取元素,也叫标签
有很多API
- window.idxxx或者直接idxxx
- document.getElementByld('idxxx')
- document.getElement ByTagName('div')[0]
- document.getElement ByClassName('red')[0]
- document.querySelector('#idxxx')
- document.querySelector AI (.red')[0]
用哪一个
- 工作中用querySelector和querySelectorAll
- 做demo直接用idxxx,
- 千万别让人发现
- 要兼容IE的可怜虫才用getElement(s)ByXXX
获取特定元素
获取html元素
- document.documentElement
获取head元素
- document.head
获取body元素
- document.body
获取窗口(窗口不是元素)
- window
获取所有元素
- document. all
- 这个document.all是个奇葩,第6个falsy值
节点Node包括以下几种
MDN有完整描述,x.nodeType 得到一个数字
- 1表示元素Element,也叫标签Tag
- 3表示文本Text
- 8表示注释Comment
- 9表示文档Document
- 11表示文档片段DocumentFragment记住1和2即可
图示跨线程操作
DOM中自定义属性的变更不会直接更新