1- dom对象的innerText和innerHTML的区别
- innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容。
- innerHTML属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构,在写入的时候也会自动构建DOM。
2- elem.children 和 elem.childNodes 的区别
- Element.children:子元素列表(HTMLCollection),返回一个HTMLCollection对象,包括当前元素节点的所有子元素。
- Element.childNodes:子元素列表(NodeList),返回一个NodeList集合,包括当前节点的HTML元素节点,还返回Text节点和Comment节点。
3- 几种常见查询元素的方法;ES5的元素选择方法
查询元素常见的方法:
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- getElementsByName()
ES5的元素选择方法:
- querySelector()
- querySelectorAll()
4- 如何创建一个元素?如何给元素设置属性?如何删除属性
- 创建元素:createElement()
- 给元素设置属性:setAttribute("属性名", "属性值")
- 删除属性:romoveAttribute("属性名")
5- 如何给页面元素添加子元素?如何删除页面元素下的子元素?
- 添加元素:
var newDiv = document.createELement('newDivName');
document.body.appendChild(newDiv); - 删除元素:
document.body.removeChild(newDiv);
6- element.classList 有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
- element.classList 是一个只读属性,返回一个元素的类属性的实时 DOMTokenList集合。
- add(className):添加类
- remove(className):删除类
- contains(className):是否包含指定类名,返回布尔值
- toString():将类数组对象转为字符串
- element.classList.contains(className):判断是否包含且返回布尔值
- element.classList.add(className):添加类
- element.classList.remove(className):删除类
7- 如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
结果:
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</btn>
</div>
var liList = document.querySelectorAll('.mod-tabs>li');
var btn = document.querySelector('.btn');
//兼容ie7、8
var liList = document.getElementByTagName('li');
var btn = document.getElementByClassName('btn')[0]