关于DOM的问题笔记

1. 获取某个 dom 元素的方式

//节点集合属性（元素节点选取）
document.all    //返回文档中所有元素
document.links  //返回当前文档的所有a元素
document.forms  //返回页面中所有表单元素
document.images  //返回页面中所有图片元素
document.embeds  //返回网页中所有嵌入对象
document.scripts  //返回当前文档的所有脚本
document.styleSheets  //返回当前网页的所有样式表（数组；实时的）

//查找方法
Document（/Element）.querySelector(selectors)   //接受一个CSS选择器作为参数，返回第一个匹配该选择器的元素节点。
document（/Element）.querySelectorAll(selectors)  //接受一个CSS选择器作为参数，返回所有匹配该选择器的元素节点。（不实时，只是快照）
document（/Element）.getElementsByTagName(tagName)  //返回所有指定HTML标签的元素。（实时；可以传参 *）
document（/Element）.getElementsByClassName(className)   //返回包括了所有class名字符合指定条件的元素（实时；可以传参 *）
document（/Element）.getElementsByName(name)   //用于选择拥有name属性的HTML元素（比如<form>、<radio>、<img>、<frame>、<embed>和<object>等）
document.getElementById(id)   //返回匹配指定id属性的元素节点。
document.elementFromPoint(x,y)  //返回位于页面指定位置最上层的Element子节点。

Element.children   //包括当前元素节点的所有子元素
Element.childElementCount   //返回当前元素节点包含的子HTML元素节点的个数
Element.firstElementChild  //返回当前节点的第一个Element子节点  
Element.lastElementChild   //返回当前节点的最后一个Element子节点  
Element.nextElementSibling  //返回当前元素节点的下一个兄弟HTML元素节点
Element.previousElementSibling  //返回当前元素节点的前一个兄弟HTML节点
Element.offsetParent   //返回当前元素节点的最靠近的、并且CSS的position属性不等于static的父元素。（<td><th><table>为static，它们也被当做offsetPatent）

2. 说一下 offsetwidth clientwidth 和 scrollwidth 的区别

Element.offsetWidth    //返回元素的水平宽度(包含border,padding和内容；同elm.getBoundingClientRect().width)
Element.scrollWidth  //返回滚动元素节点的总宽度
Element.clientWidth   //返回元素节点可见部分的宽度（只包含padding和内容高度）

3. 如何获取一个元素的 css 类

Element.classList  //返回当前元素节点的所有class集合
element.getAttribute('class')
Element.className  //获取元素节点的类名

4. 利用原生 dom 怎么获取某个元素的样式

document.styleSheets  //返回当前网页的所有样式表（数组；实时的）
Element.style  //返回元素节点的行内样式，返回CSSStyleDeclaration对象
element.style.cssText //用来读写或删除整个style属性（内联）
element.style.getPropertyValue(property)  //获取css内联属性
element.getAttribute('style')

styleElement(/linkElement).sheet.cssRules[0].style
//ie8
element.currentStyle[attrName]
//ie9+
window.getComputedStyle(el,null)[attrName] 
window.getComputedStyle(el,null).getPropertyValue(attrName)
//伪类
window.getComputedStyle(el,':after')[attrName]
//getComputeStyle()返回一个只读的类似style的CSSStyleDeclaration对象

5. 上一个问题的 getcomputedstyle 和 直接用 style 是有区别的

Style属性值只包含HTML中style属性定义的CSS。
getComputedStyle（）可获得最终应用在元素上的所有CSS属性对象，包括内联样式表单、外部样式表单及浏览器样式表单级联样式。
getComputedStyle（）返回值只读，而style可修改。
getComputedStyle（）返回的颜色值格式永远都是rgb(#,#,#)

6. 如何在某个位置插入一个元素？

Node.appendChild(node)   //向节点添加最后一个子节点，DOM或documentFragment
Node.insertBefore(newNode,oldNode)  // 在指定子节点之前插入新的子节点
//解析HTML字符串，然后将生成的节点插入DOM树的指定位置。
Element.insertAdjacentHTML(where, htmlString); 
Element.insertAdjacentHTML('beforeBegin', htmlString); // 在该元素前插入  
Element.insertAdjacentHTML('afterBegin', htmlString); // 在该元素第一个子元素前插入 
Element.insertAdjacentHTML('beforeEnd', htmlString); // 在该元素最后一个子元素后面插入 
Element.insertAdjacentHTML('afterEnd', htmlString); // 在该元素后插入

7. innerHtml outerHtml innerText outerText textContent nodeValue区别

Element.innerHTML   //返回该元素包含的HTML代码，可读写
Element.outerHTML  //返回指定元素节点的所有HTML代码，包括它自身和包含的的所有子元素，可读写
Node.textContent  //返回当前节点和它的所有后代节点的文本内容，可读写
Node.nodeValue  //返回Text或Comment节点的文本值，只读。对于文档节点来说, nodeValue返回null. 对于text, comment, 和 CDATA 节点来说, nodeValue返回该节点的文本内容. 对于 attribute 节点来说, 返回该属性的属性值.
HTMLElement.outerText  //是一个非标准的属性。作为一个得到器，它返回相同的值作为Node.innerText. 作为一个设置器，它将删除当前节点并将其替换为给定的文本。

textContent与innerText的区别

Internet Explorer 引入了 node.innerText。意图类似，但有以下区别：
textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会。
innerText意识到样式，并且不会返回隐藏元素的文本，而textContent会。
由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。

textContent与innerHTML的区别

正如其名称，innerHTML 返回 HTML 文本。通常，为了在元素中检索或写入文本，人们使用innerHTML。
但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。
此外，使用textContent可以防止  XSS 攻击。

8. 如何创建 删除 修改 元素？

document.createElement(tagName)   //用来生成HTML元素节点。
document.createTextNode(text)   //用来生成文本节点
Node.removeChild(node)   //删除节点，在要删除节点的父节点上操作
Node(/Element).remove()  //用于删除当前节点
Node.normalize()   //用于清理当前节点内部的所有Text节点。它会去除空的文本节点，并且将毗邻的文本节点合并成一个。
Node.replaceChild(newChild,oldChild)  //替换节点
element.setAttribute('style','')  //第一个参数可以是任意元素属性，用作ID或者class。可以快速更改元素样式
element.style.setProperty(propertyName,value)  //设置css内联属性

9. createDocumentFragment 的作用？

（1）    文档片段可以包含任意类型的节点（除了<body><html>）,而元素可能不行。
（2）    当你附加文档片段到DOM时，它自身并不会被添加。这与附加元素节点相反，元素节点会跟着附加操作一并添加到DOM中。
（3）    当文档片段被附加到DOM时，它从文档片段传输内容至它被附加的位置。而自身不在存在于创建它时所在的位置。对用来临时包含节点，而后移动到实时DOM树的元素节点来说就不是这种情况了。