题目1: dom对象的innerText和innerHTML有什么区别?###
innerText:返回元素包含的文本内容,html内容不会被解析
innerHTML:返回元素的HTML的结构,内容以html的方式被解析
题目2: elem.children和elem.childNodes的区别?###
childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本
children 属性,非标准的,它返回指定元素的子元素集合。经测试,它只返回HTML节点,甚至不返回文本节点
题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?###
- getElementById 返回匹配指定ID属性的元素节点。
- getElementsByClassName 返回一个类似数组的对象(HTMLCollection类型的对象),包括了所有class名字符合指定条件的元素(搜索范围包括本身),元素的变化实时反映在返回结果中
- getElementsByTagName 返回所有指定标签的元素(搜索范围包括本身)
- getElementsByName 用于选择拥有name属性的HTML元素,比如form、img、frame、embed和object,返回一个NodeList格式的对象,不会实时反映元素的变化。
ES5选择方法:
- querySelector 返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null
- querySelectorAll 返回匹配指定的CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象不是动态集合,所以元素节点的变化无法实时反映在返回结果中。
题目4:如何创建一个元素?如何给元素设置属性?如何删除属性###
createElement():用来生成 HTML 元素节点。
createTextNode():用来生成文本节点,参数为所要生成的文本节点的内容。
createDocumentFragment():生成一个 DocumentFragment 对象。
getAttribute():用于获取元素的 attribute 值。
createAttribute():生成一个新的属性对象节点,并返回它。
setAttribute():用于设置元素属性。
removeAttribute():用于删除元素属性。
题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?###
appendChild():在元素末尾添加元素。
insertBefore():在某个元素之前插入元素。
replaceChild():替换指定元素。
removeChild():用来删除元素。
题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?###
element.classList 属性用于返回一个元素的 className 集合,并且该属性拥有add,remove,toggle,contains方法。
add():表示往类名列表中新增一个类名;如果之前类名存在,则添加忽略。
remove():表示往类名列表中移除该类名。
toggle():若类名列表中有此类名,移除之,并返回 false;如果没有,则添加该类名,并返回 true。
contains():表示往类名列表中是否包含该类名。
题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?###
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
//方式1:
var liEle= document.getElementsByTagName('li');
console.log(liEle);
var btnEle = document.getElementsByClassName('btn');
console.log(btnEle);
//方式2:
var liEle = document.querySelectorAll('li');
console.log(liEle);
var btnEle = document.querySelector('.btn');
console.log(btnEle);