1.dom对象的innerText和innerHTML有什么区别？
- innerText:得到dom对象(元素)内部的文本内容,如果dom对象内部嵌套多层元素,则会按照由浅到深的顺序,将各元素内的文本连接起来
- innerHTML:得到dom对象(元素)内部的HTML结构
2.elem.children和elem.childNodes的区别？
<!DOCTYPE HTML>
<html>
<head>
<title>test dom</title>
</head>
<body>
<div id="test">
<h1>aaaaaa</h1>
aaaaaa
<a href="www.baidu.com">baidu</a>
<p class="testclass">bbbbbb</p>
</div>
</body>
</html>
-
elem.children:返回子HTML元素列表(不包含elem内部的文本节点),是HTMLCollection类型的对象
-
elem.childNodes:返回子元素列表(包含elem内部的文本节点),是NodeList类型的对象
- 其中第2个文本节点的内容为:
换行 aaaaaa 换行
- 其中第2个文本节点的内容为:
- HTMLCollection和NodeList:
- 相似:
- 都是类数组对象，都有length属性，可以通过for循环迭代
- 都是只读的
- 都是实时的,即文档的更改会立即反映到相关对象上面(有一个例外，document.querySelectorAll返回的NodeList不是实时的)
- 都有item()方法，可以通过item(index)获取元素
- 区别:
- HTMLCollection对象具有namedItem()方法(根据 Id 返回指定节点，或者作为备用，根据字符串所表示的 name 属性来匹配。根据 name 匹配只能作为最后的依赖，并且只有当被引用的元素支持 name 属性时才能被匹配。)
- HTMLCollection通过属性获取元素可以支持id和name，而NodeList对象只支持id
- 相似:
var elem1, elem2;
// 假定在文档中有一个 <form> 元素，且它的 id 是 "myForm"：document.forms 是一个 HTMLCollection
elem1 = document.forms[0];
elem2 = document.forms.item(0);
alert(elem1 === elem2); // 显示 "true"
elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");
alert(elem1 === elem2); // 显示 "true"
而NodeList只支持id
var divs = document.getElementsByTagName( 'div' );
var firstDiv = divs[ 0 ];
3.查询元素有几种常见的方法？ES5的元素选择方法是什么?
- 查询元素有几种常见的方法
- getElementsById():返回匹配指定ID属性的元素节点
- getElementsByClassName():返回一个类似数组的对象（NodeList类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身）
- getElementsByTagName():返回所有指定标签的元素（搜索范围包括本身）,返回值是一个NodeList对象
- getElementsByName():用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象
- ES5的元素选择方
- querySelector():返回匹配指定的CSS选择器的元素节点,如果有多个节点满足匹配条件，则返回第一个匹配的节点
- querySelectorAll():返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象
4.如何创建一个元素？如何给元素设置属性？如何删除属性
-
创建一个元素:
- 使用createELement方法创建HTML元素节点
var newDiv = document.createELement("div");- 使用createTestNode方法创建文本节点
var newContent = document.createTextNode("Hello");- 使用createDocumentFragment方法生成一个DocumentFragment对象。
var docFragment = document.createDocumentFragment(); -
给元素设置属性
- setAttribute()方法用于设置元素属性
//为id = div1的元素设置class=container的属性 var node = document.getElementsById("div1"); node.setAttribute("class","container"); -
删除属性
- romoveAttribute()方法用于删除元素属性
var node = document.getElementsById("div1");
5.如何给页面元素添加子元素？如何删除页面元素下的子元素?
-
添加子元素
- appendChild()用于在元素末尾添加元素
var bodylist = document.getElementsByTagName("body"); var body = bodylist[0]; var newNode = document.createElement("h2"); var newContent = document.createTextNode("zzzzzzzzzzzzzzz"); newNode.appendChild(newContent); body.appendChild(newNode);- insertBefore()在某个元素之前插入元素
body.insertBefore(newNode, body.firstChild); -
删除子元素
- removeChild()用于删除元素
parentNode.removeChild(childNode);
6.element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
-
element.classList有以下几种方法
使用element.classList.contains()判断一个元素的 class 列表中是包含某个 class
使用element.classList.add()添加一个class
使用element.classList.remove()删除一个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元素:
querySelectorAll(".mod-tabs li")querySelectorAll("li")document.getElementsByTagName("li")
- 选中btn元素:
querySelector(".btn")document.getElementsByTagName("button")[0]document.getElementsByClassName("button")[0]
