DOM相关操作
-
DOM对象的innerText和innerHTML有什么区别？
共同点：innerHTML和innerText是doctument对象的属性，都可以用来读取一个元素的内容。
区别1：对于一个单行无嵌套的元素，innerHTML和innerText得到的结果是相同的；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<p>A test!</p>
</body>
</html> //innerText、innerHTML获取<p>,结果都是相同的；
区别2：对于多行或有嵌套的元素，innerHTML会获取从开始标签到结束标签中的所有内容，包括子元素标签，返回整个HTML结构；innerText会获取从开始标签到结束标签中的所有内容，但不包括子元素标签，并把内容拼凑在一行；
<div>
<p>
123
<span>456</span>
</p>
</div>
<!--
<div>innerHTML返回：
"
<p>
123
<span>456</span>
</p>
" -->
<!--
<div>innerText返回：
"123 456"
-->
-
elem.children和elem.childNodes的区别？
相同点：elem.children和elem.childNodes都可以以类数组的形式返回子元素节点；
区别1：elem.children返回的类数组是HTMLCollection，elem.childNodes返回的类数组是NodeList；
区别2：elem.children只包含元素节点，elem.childNodes包含元素节点、文本节点、注释节点等。
-
查询元素有几种常见的方法？ES5的元素选择方法是什么?
1.getElementById()：通过元素的id属性查询元素，若不存在，则返回null；
<p id="test">aa<p>
var a = document.getElementById("test") //获取到id="test"的p元素；
2.getElementsByClassName()：返回一个类数组的对象HTMLCollection，包括了所有class名字符合指定条件的元素（搜索范围包括本身），参数可以是多个空格分隔的class名字，返回同时具有这些节点的元素，元素的变化实时反映在返回结果中。：
document.getElementsByClassName('nav layout'); //获取拥有class为nav、layout的所有元素
3.getElementsByTagName()：返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection类数组，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中：
var paras = document.getElementsByTagName("h1"); //匹配所有的h1元素；
4.getElementsByName()：用于选择拥有name属性的HTML元素，比如img、form等，返回一个NodeList格式的对象，不会实时反映元素的变化；
var img = document.getElementsByName("pic");
5.querySelector()：ES5新增方法，返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null；
document.querySelector(".box1") //匹配class为box1的元素（若有多个，返回第一个）；
6.querySelectorAll()：与querySelector()类似，返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中；
document.querySelector(".box1") //匹配class为box1的所有元素；
-
如何创建一个元素？如何给元素设置属性？如何删除属性？
创建元素：
createElement()：可以生成HTML元素节点；
var newDiv = document.createElement("div"); //创建了一个div；
设置元素属性：
setAttribute()：为一个元素设定属性值，若属性不存在，则创建这个属性，并设值；
var p = document.getElementById("title")
p.setAttribute("class","layout") //第一个参数是属性名，第二个为属性值，用逗号分隔；
删除属性：
removeAttribute()： 删除一个元素的指定属性；
var p = document.getElementById("title");
p.removeAttribute("id"); // 删除p元素的id属性；
-
如何给页面元素添加子元素？如何删除页面元素下的子元素?
给页面元素添加子元素：
1.appendChild()：在父元素的末尾添加子元素；
<div id="box"></div> //已知一个div元素；
var p = createElement("p"); //创建一个p元素；
var div = getElementById("box"); // 通过id获取div元素；
div.appendChild(p); //将p元素添加到div中；
2.insertBefore()：在某个元素之前插入元素；
<div id="box">
<a href=""></a>
</div>
var p = createElement("p");
var div = getElementById("box");
div.insertBefore(p,div.firstchid); //在div第一个子元素前插入p元素；
3.replaceChild()：用于替换元素，参数为要插入的元素和要替换的元素，逗号分隔；
删除页面元素下的子元素：
removeChild()：删除参数指定的子元素，参数为子元素的节点对象（childNode）；
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]); //删除list下第一个子元素；
-
element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
element.classList返回属性的类名，有这么几个属性和方法：
1.length：返回元素类名的个数，只读；
2.item()：支持一个参数，为类名的索引，返回对应的类名；
<body class="a b c"></body>
document.body.classList.item(0) // 得到a；
3.add()：接受一个class名字符串作为参数，把该class名添加到元素上，若已存在，则忽略；
document.body.classList.add("d")
document.body.classList.contains("d") // ture；
4.remove() ：接受一个class名字符串作为参数，把该class从元素上移除；
document.body.classList.remove("c");
document.body.classList.contains("c"); // false；
5.contains()：接受一个class名字符串作为参数，验证元素的class列表中是否包含该class，返回布尔值；
document.body.classList.contains("a") // ture；
6.toggle()：接受2个参数，第一个为class名字符串，第二个为布尔值，如果为true表示添加该class，如果为false则表示移除该class，并返回该Boolean值。
-
如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
//获取li
//方法1
document.querySelectorAll('li');
//方法2
document.getElementsByTagName('li');
//获取btn
//方法1
document.getElementsByClassName('btn');
//方法2
document.querySelector('.btn')
//方法3
document.getElementsByTagName('button');
