题目1: dom对象的innerText和innerHTML有什么区别?
Element.innerHTML 属性设置或获取描述元素后代的HTML语句。Element.innerText innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容
题目2: elem.children和elem.childNodes的区别?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id = 'app'>
ddd
<span>span标签</span>
<p><span>111</span>p标签</p>
</div>
</body>
</html>
通过对比我们可以发现
children:子元素列表(HTMLCollection),当前元素的子元素的集合
childNodes:子元素列表(NodeList),当前元素的子元素以及文本(空格也算文本)的集合
题目3:查询元素有几种常见的方法?ES5的元素选择方法是什么?
getElementById()getElementById方法返回匹配指定ID属性的元素节点。如果没有发现匹配的节点,则返回null。这也是获取一个元素最快的方法
var elem = document.getElementById("test");
诸如此类的还有getElementByClassName()、getElementsByTagName()、getElementsByName()、querySelector()
题目4:如何创建一个元素?如何给元素设置属性?如何删除属性
通过createElement()方法创建元素。通过元素的setAttribute()方法给元素设置属性。通过元素的removeAttribute()删除属性。
题目5:如何给页面元素添加子元素?如何删除页面元素下的子元素?
appendChild()
insertBefore()
removeChild()
题目6: element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
只支持ie10以上(一般用不了)
定义和用法
classList 属性返回元素的类名。
该属性用于在元素中添加,移除及切换 CSS 类。
classList 属性是只读的,但你可以使用 add() 和 remove() 方法修改它。
语法
element.classList
Properties
属性 Description
length 返回类列表中类的数量 该属性是只读的
方法
方法 描述
add(class1, class2, ...) 在元素中添加一个或多个类名。
如果指定的类名已存在,则不会添加
contains(class) 返回布尔值,判断指定的类名是否存在。
可能值:
true - 元素包已经包含了该类名
false - 元素中不存在该类名
item(index) 返回类名在元素中的索引值。索引值从 0 开始。
如果索引值在区间范围外则返回 null
remove(class1, class2, ...) 移除元素中一个或多个类名。
注意: 移除不存在的类名,不会报错。
toggle(class, true|false) 在元素中切换类名。
第一个参数为要在元素中移除的类名,并返 回 false。
如果该类名不存在则会在元素中添加类名,并返回 true。
// div是具有class =“foo bar”的<div>元素的对象引用
div.classList.remove("foo");
div.classList.add("anotherclass");
// 如果visible被设置则删除它,否则添加它
div.classList.toggle("visible");
// 添加/删除 visible,取决于测试条件,i小于10
div.classList.toggle("visible", i < 10);
//返回布尔值,判断指定的类名是否存在。
alert(div.classList.contains("foo"));
//添加或删除多个类
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");
题目7: 如何选中如下代码所有的li元素? 如何选中btn元素?
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
<script>
//选中所有的li元素
document.getElementsByTagName('li')
document.querySelectorAll('li')
//选中btn元素
document.getElementsByClassName('btn')
document.querySelector('.btn')
</script>