1. dom对象的innerText和innerHTML有什么区别?
innerText 与 innerHTML都是可以返回元素内包含的内容。
但是innerText返回的是元素内的文本内容。不包括HTML标签。
而innerHTML返回的内容是包含HTML标签的。使用outerHTML还可以返回自生元素的HTML标签。
2. elem.children和elem.childNodes的区别?
elem.children获取到的是目标元素的所有元素子节点。
elem.childNodes获取到的是目标元素的所有元素子节点、文本节点、注释节点等内容。
3. 查询元素有几种常见的方法?ES5的元素选择方法是什么?
- getElementById():返回指定id的元素
- getElementsByClassName():返回指定class的元素集
- getElementsByTagName():返回指定标签的元素集
- getElementsByName():返回指定name值的元素集
- querySelector():返回指定的css选择器的元素
- querySelectorAll():返回指定的css选择器的所有节点
4. 如何创建一个元素?如何给元素设置属性?如何删除属性
var myDiv = document.createElement('div')
myDiv.setAttribute('id',ssr)//设置属性
myDiv//<div id="ssr"></div>
myDiv.removeAttribute("id")//删除属性
myDiv//<div></div>
5. 如何给页面元素添加子元素?如何删除页面元素下的子元素?
var parents = document.getElementById("parents")
var myDiv = document.createElement("div")//创建元素节点
parents.appendChild(myDiv)//将myDiv插入到父元素中
parents.removeChild(myDiv)//将myDiv从父元素中删除
6. element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
- add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。 - remove( String [,String] )
删除指定的类值。 - item ( Number )
按集合中的索引返回类值。 - toggle ( String [, force] )
当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回-
false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它 - contains( String )
检查元素的类属性中是否存在指定的类值。
// div是具有class =“color str”的<div>元素
div.classList.contains("color");
div.classList.remove("color");
div.classList.add("apple");
// 如果jirengu被设置则删除它,否则添加它
div.classList.toggle("jirengu");
// 添加/删除 jirengu,取决于测试条件,i小于10
div.classList.toggle("jirengu", i < 10);
alert(div.classList.contains("color"));
//添加或删除多个类
div.classList.add("color","str");
div.classList.remove("color", "str");
7. 如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</button>
</div>
var allLi = document.getElementsByTagName("li");
var btn = document.getElementsByClassName("btn")