1: dom对象的innerText和innerHTML的区别
innerText只获取该元素内的文本,innerHTML获取该元素内的全部内容,包括HTML标签和文本。
2: elem.children与elem.childNodes的区别
elem.childNodes:标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点。
elem.children:非标准属性,它返回指定元素的子元素集合。但它只返回HTML节点,不返回文本节点。
3:查询元素常见的方法
常见方法:
1.getElementById() :可返回对拥有指定 ID 的第一个对象的引用。
2.getElementsByName() :返回带有指定名称的对象集合。
3.getElementsByTagName() : 返回带有指定标签名的对象集合。
4.getElementByClassName() : 返回带有指定类名的对象的集合。
ES5的元素选择方法:querySelector()方法,参数形式与CSS选择器相同,可获取第一个符合条件的元素,
querySelectorAll()方法可获取符合条件的全部元素。
4:创建元素,添加、删除属性:
- 创建元素:createElement()用来生成HTML元素节点,参数即为需要创建的标签名。
- 设置属性:setAttribute()用于设置元素属性,参数为属性名和属性值。
- 删除属性:removeAttribute()用于删除元素属性,参数为要删除的属性名。
5:添加与删除子元素
appendChild()方法可以在元素末尾添加元素;删除元素使用removeChild()方法。
6: element.classList
element.classList的方法有:add(class1, class2, ...)、contains(class)、item(index)、remove(class1, class2, ...)、toggle(class, true|false)。
判断classlist是否包含某个class:contains(class) 返回布尔值,true表示包含,false表示不包含;
添加class:add(class1, class2, ...) 在元素中添加一个或多个类名。如果指定的类名已存在,则不会添加 。
删除class: remove(class1, class2, ...) 移除元素中一个或多个类名。移除不存在的类名,不会报错。
7: 举例:如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
<script>
document.getElementsByTagName('li') //选中所有li元素
document.getElementsByClassName('btn') //选中btn元素
</script>