1. dom对象的innerText和innerHTML有什么区别？
- innerText：返回对应元素内的所有文本内容；
- innerHTML：返回元素内的HTML代码（从对象的起始位置到终止位置的全部内容，包括HTML标签）
<body>
<p1>标题</p1>
</body>
---------------------------------------------
document.body.innerText;
//"标题"
document.body.innerHTML;
/*
"
<h1>标题</h1>
"
*/
1.png
2. elem.children和elem.childNodes的区别？
- elem.childNodes : 是标准属性，返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
- ele.children : 非标准属性，返回指定元素的子元素集合。
3. 查询元素有几种常见的方法？ES5的元素选择方法是什么?
-
Document方法：
-
getElementById()：返回匹配指定ID属性的元素节点，如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法。 -
getElementsByClassName()：返回一个类似数组的对象，包括所有class名字符合指定条件的元素，元素的变化实时反应在返回的结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。 -
getElementsByTagName()：返回所有指定标签的元素（搜索范围包括元素本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。 -
getElementsByName()：适用于拥有name属性的HTML元素，（比如<form><input><img><frame><a>和<object>等），返回一个NodeList格式的对象，不会实时反应元素的变化。
-
-
ES5：
-
document.querySelector()：接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null -
document.querySelectorAll()：与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。
-
4. 如何创建一个元素？如何给元素设置属性？如何删除属性
- 创建元素
- 创建元素：
document.creatElement(tagName)用来生成HTML元素节点，参数为引号包裹的元素的标签名。 - 创建文本节点：
document.createTextNode(content)用来生成文本节点，参数为所要生成的文本节点的内容。 - 创建DOM片段：
document.createDocumentFragment生成一个DocumentFragment对象。该对象是一个存在于内存的DOM片段，不属于当前文档，常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
- 创建元素：
- 设置属性
element.setAttribute(attr,value) - 删除属性
element.removeAttribute(attr)
5. 如何给页面元素添加子元素？如何删除页面元素下的子元素?
- 添加：
parentNode.appendChild("newElement")//在父元素parentNode末尾添加一个元素newElement - 删除：
node.removeChild("oldElement")//在node元素中删除子节点oldElement - 替换：
parentNode.replaceChild("newElement","oldElement")//用 newchild 来替换父元素 parentNode 元素中的 oldChild 节点，如果 newChild 已经存在于 DOM 树中，则他会被从原始位置删除。
6. element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
Element.classList 是一个只读属性，返回一个元素的类属性的实时 DOMTokenList集合。
var element=document.createElement('div');
element.classList.add('active') //添加一个class:"active"
element.classList.add('box') //添加一个class:"box"
element.classList.remove('active') //删除class:"active"
element.classList.contains('active') //检测是否存在"active"，存在返回true，不存在返回false
element.classList.contains('box') //检测是否存在"box"，存在返回true，不存在返回false
7. 如何选中如下代码所有的li元素？ 如何选中btn元素？
代码.png
-
选中给所有li元素：
document.getElementsByTagName("li")或者document.querySelectorAll(".mod-tabs li")
3.png
-
选中btn元素：
document.getElementsByClassName("btn")或者document.querySelector(".btn")
4.png
网友评论