题目1： dom对象的innerText和innerHTML有什么区别？
innerText是一个可写属性，返回元素包含的文本内容，在多层次的时候，会按照元素
由浅到深的顺序拼接其内容。
innerHTML 属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的
HTML结构，在写入的时候，也会自动构建DOM。
举列说明
<body>
<div id="ct">
<p>123
<span>456</span>
</p>
</div>
<script>
var ct = document.getElementById('ct');
console.log(ct.innerText);
// 结果为 “123456”
console.log(ct.innerHTML);
// 结果为 "<p>123<span>456</span></p>"
</script>
</body>
题目2： elem.children和elem.childNodes的区别？
举列说明
<body>
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
<script>
var oDiv = document.getElementsByClassName("mod-tabs")[0];
// 第一种遍历子元素
console.log(oDiv.children.length); // 2
for(var i = 0; i < oDiv.children.length; i++) {
console.log(oDiv.children[i]); // ul , button
}
console.log(oDiv.childNodes.length); // 5
console.log(oDiv.childNodes); // [text, ul, text, button.btn, text]
for(var i = 0; i < oDiv.childNodes.length; i++) {
console.log(oDiv.childNodes[i].nodeType); // 3 1 3 1 3
/* 由此我们可以知道 文本节点对应的nodeType为3，而元素节点对应的
nodeType为1 */
if(oDiv.childNodes[i].nodeType === 1) { // 判断是否是元素节点
// do something
}
}
</script>
</body>
题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?
（1）getElementById方法返回匹配指定ID属性的元素节点。
var elem = document.getElementById("test");
（2）getElementsByClassName方法返回一个类似数组的对象，包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。
var elements = document.getElementsByClassName('tab');
（3）getElementsByTagName()
var paras = document.getElementsByTagName("p");
（4）getElementsByName();
// 假定有一个表单是<form name="x"></form>
var forms = document.getElementsByName("x");
forms[0].tagName // "FORM"
ES5的元素选择方法
（1）querySelector()
querySelector方法返回匹配指定的CSS选择器的元素节点。如果有多个
节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
var el1 = document.querySelector(".myclass");
var el2 = document.querySelector("#myParent .child");
（2）querySelectorAll()
querySelectorAll 方法 返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementList = document.querySelectorAll(selectors);
querySelectorAll 方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。
var matches = document.querySelectorAll("div.note, div.alert");
题目4：如何创建一个元素？如何给元素设置属性？如何删除属性
var attribute = document.createElement(name); // 创建
var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal"); // 设置
node.removeAttribute('src'); // 删除
题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?
（1）在元素末尾添加元素
var ct = document.getElementById("ct");
var newDiv = document.createElement("div");
var newContent = document.createTextNode("hello");
newDiv.appendChild(newContent);
ct.appendChild(newDiv);
（2）在某个元素之前插入元素
var ct = document.getElementById("ct");
var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);
ct.appendChild(newDiv);
(3)document.createDocumentFragment()的用法。
var arr = [1,2,3,4,5,6,7,8,9];
var tempCt = document.createDocumentFragment();
for(var i = 0; i < arr.length; i++) {
var node = document.createElement('div');
node.innerText = arr[i];
tempCt.appendChild(node);
}
target.appendChild(tempCt);
删除页面元素下的子元素
parentNode.removeChild(childNode);
题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
element.classList.add('active'); // 新增 class
element.classList.remove('active'); // 删除 class
element.classList.toggle('active'); // 新增/删除 切换
element.classList.contains('active'); // 判断是否拥有class
题目7： 如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
// 选中所有的li元素
// 方法一
var oLi = document.querySelectorAll(".mod-tabs li");
// 方法二
var oDiv = document.getElementsByClassName("mod-tabs")[0];
var oLi = oDiv.getElementsByTagName('li');
---------
// 选中btn元素
var oBtn = document.getElementsByClassName("btn");
网友评论