JS之DOM

DOM(Document Object Model)

---

document：是html的爸爸，可是html是根元素，结合实际经验理解8（我目前不理解）
把文档变成对象的模型叫作 DOM

• 本节主要讲

1. Node、Document和Element的API
2. 如何将一个很烂很烂的API写的好用一些（未完成）
3. 本文只是一个笔记，关于接口的属性和方法的更多信息请参考MDN，文中只提到一小部分。
4. 本节未完。

---

DOM是一棵树，树上有Node

Node 分为 Document（html）、Element（元素）和 Text（文本），以及其余不重要的。

Node 的接口

1. 属性：背单词，而后互相结合

childNodes,firstChild,innerText,lastChild,6nextSibling,nodeName,nodeType,nodeValue,outerText,ownerDocument,parentElement,parentNode,previousSibling,textContent

• child / children / parent(s)
• node
• first / last
• next / previous(先前的)
• sibling(兄弟、姐妹) / siblings(兄弟们、姐妹们)
• type
• value / text / content(内容，目录)
• inner(里面、内部) / outer(外面、外部)
• element(元素,标签)

2. 方法（若是一个属性是函数，那么这个属性就也叫作方法；换言之，方法是函数属性）

• appendChild()：插入一个节点
• cloneNode()：克隆一个节点
  面试题——深拷贝和浅拷贝的区别(看文档)
• contains()：返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点
• hasChildNodes()：返回一个布尔值,代表当前节点是否包含有子节点.
• insertBefore()：在引用节点以前插入节点做为指定父节点的子节点
• isEqualNode()：测试两个节点是否相等，
• isSameNode()：测试两个节点是否相同
• removeChild()：从DOM中删除一个子节点。返回删除的节点。
  注意：被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,所以,你还能够把这个节点从新添加回文档中
• replaceChild()：用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
• normalize()： 常规化

3. 总结

①搞清楚英文单词的意思就知道用法。
②若是发现知道英文后依然不明白用法，看 MDN 的例子便可。
DOM APi 无外乎「增删改查」！（查通常用DOM查）
特别须要记忆的属性和方法：
①nodeName：除svg小写外，其他标签均为大写，如'HTML','DIV'等。
②nodeType：=1 是element；=3 是text 等，其他看MDN（面试题）

此处还有面试必考题：DocumentFragment 优化

③ innerText 和 textContent 区别（面试题）
textContent会获取包括<script> <style>在内的元素内容，而innerText不会。
更多区别看MDN。
④nextSbiling：可能会得到文本
⑤cloneNode()：接受一个布尔值，若是是true就是深拷贝，若是是false就是浅拷贝。
⑤isEqualNode()和isSameNode()的区别:Equal是看起来相等，Same是彻底相等，就是同一个！
⑥normalize()：将不正常的东西变成正常的，具体看文档。
⑦插入文本的方法：

• div1.appendChild(document.creatTextNode('Hello world'))
• div1.innerText('Hello world')

以有两种方法，在之后的工做中就能知道用哪一种了，不踩坑是记不住的。

---

Document 的接口

1. 属性

• body
• characterSet：只读属性返回当前文档的字符编码
• childElementCount：只读属性返回一个无符号长整型数字
• children
• doctype
• documentElement：只读属性返回Document的根元素（如html）
• domain：获取域名
• fullscreen：全屏API
• head
• hidden：//总会有一些没啥用的API
• images
• links：获取全部的a标签
• location
• onxxxxxxxxx：事件监听
• origin
• plugins：获取用的装的插件
• readyState：下载好了吗？
• referrer：引荐人，好比打开网站A的图片，服务器就要问浏览器referrer是谁，若是是这个网站就是容许访问，若是不是就拒绝访问。固然也能够接受访问，这个API的功能就是能够判断referrer是谁来接受或者拒绝访问。（这只是一个很垃圾的例子，具体看文档或者别人讲的吧）
• scripts
• scrollingElement：获取正在滚动的元素
• styleSheets：获取全部的CSS
• title
• visibilityState：获取页面是否被显示

2. 方法

• close()：关闭当前窗口或某个指定的窗口；与window.open搭配使用
• createDocumentFragment()：建立一个新的空白的文档片断
• createElement()
• createTextNode()
• execCommand()：运行代码；用于写富文本编辑器
• exitFullscreen()：退出全屏
• getElementById()：                几乎不用，用querySelector(All)代替
• getElementsByClassName()：几乎不用，用querySelector(All)代替
• getElementsByName()：        几乎不用，用querySelector(All)代替
• getElementsByTagName()：  几乎不用，用querySelector(All)代替
• getSelection()：获取用户选中的文本
• hasFocus()：用户是否focus在当前页面上
• open()
• querySelector()：返回一个元素
• querySelectorAll()：返回一个或多个元素组成的伪数组（DOM的API得到elements都是伪数组）
• registerElement()：//用的少
• write()
• writeln()

---

Element 的接口

1. 属性

• attributes：获取一个元素的全部属性
• childElementCount
• children
• classList
• className
• clientHeight clientLeft
• clientTop
• clientWidth
• currentStyle
• firstElementChild
• id
• innerHTML：有安全问题，它会把用户输入的标签当作开发者写的标签渲染，会引发一些问题。
• lastElementChild
• localName
• name
• namespaceURI
• nextElementSibling
• onfullscreenchange
• outerHTML
• prefix
• previousElementSibling
• runtimeStyle
• scrollHeight
• scrollLeft
• scrollLeftMax
• scrollTop
• scrollTopMax
• scrollWidth
• shadowRoot
• slot

2. 方法

• querySelector()：
• querySelectorAll()：

不仅是document有这两个方法，element也有。