1.DOM对象的innerText和innerHTML有什么区别?
innerText:返回元素包含的文本内容,是可以修改的;多层次会从外到内拼接文本内容。
innerHtml:返回的是元素的DOM结构,在写入的时候会自动构建DOM;
2.elem.children和elem.childNodes的区别?
elem.children:子元素列表(HTMLCollection);
elem.childNodes:子元素列表(NodeList);
两者主要有两点不同:
1 包含节点的类型;
(1)NodeList 是一个节点的集合,既可以包含元素也可以包含其他元素和其他节点(文本节点,注释节点);
(2)HTMLCollection是元素集合,只有Element;Element继承自Node,是Node的一种。在HTML中,它一般是HTML元素,例如p标签
2 使用方法
相同点:
(1) 他们都有length属性;
(2) 都有元素的getter,叫做item,可以传入索引值取得元素;
(3) 都是类数组;
不同点:
HTMLCollection还有一个nameItem()方法,可以返回集合中name属性和id属性值的元素(部分浏览器也支持NodeList的nameItem()方法),HTMLCollection的item()方法通过属性获取元素可以支持id和name获得元素,而NodeList对象只支持id。
3.查询元素有几种常见的方法?ES5的元素选择方法是什么?
getElementById(),getElementsByClassName(),getElementsByTagName(),getElementsByName();
ES5元素选择方法:
querySelector():返回匹配指定CSS选择器的元素节点,如果多个匹配只返回第一个。//PS无法选中CSS伪元素。
querySelectorAll():返回匹配指定CSS选择器的所有节点,返回的是NodeList类型的对象。NodeList对象是静态对象。
4.如何创建一个元素?如何给元素设置属性?如何删除属性
创建:
document.createElement() 创建html元素节点;
document.createTextNode() 创建文本节点;
document,createDocumentFragment() 创建一个DocumentFragment对象。
设置属性:
getAttribute()获取元素的attribute的值;
createAttribute()方法生成一个新的属性对象节点,并返回它。参数是name,是属性的名称。
setAttribute()方法用于设置元素的属性
var node =document.getElementById('div1');
node.setAttribute('my_attrib','newVal')
删除属性:
removeAttribute()用于删除元素属性。
5.如何给页面元素添加子元素?如何删除页面元素下的子元素?
添加子元素:appendChild()在元素的末尾添加新元素;insertBefore在某个元素之前添加新元素。
删除子元素:removeChild() //parentNode.removeChild(childNode);
6.element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
element.classList有如下几个方法:
add(class1,class2)增加一个或多个类名;
contains(class)返回布尔值,是否包含某个类名;
item(index)返回类名在元素中的索引值;
remove(class1, class2, ...)移除一个或多个类名;
toggle(class)为要移除/添加的类名,如果没有则添加,如果有删除;
7.如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
<script>
var lis = document.getElementsByTagName('li');
var btn = document.getElementsByClassName('btn')[0];
</script>