1.dom对象的innerText和innerHTML有什么区别？
- innerText 只获取对象里的纯文本
- innerHTML获取对象里的子代元素，含标签
示例：
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div class="ct">
<div id="view"><span>hello world</span></div>
</div>
<script>
var text = document.getElementById("view").innerText;
var html = document.getElementById("view").innerHTML;
console.log(text);
console.log(html);
</script>
</body>
</html>
屏幕快照 2017-01-19 下午1.54.36.png
2. elem.children和elem.childNodes的区别？
- elem.childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div id="ct">
你好世界
<div id="view"><span >hello world</span></div>
</div>
<script>
var ct = document.getElementById("ct");
for(var i = 0,e; e = ct.childNodes[i++];){
if(e.nodeType == 1){
console.log("元素节点");
console.log(e);
}
if(e.nodeType == 2){
console.log("属性节点");
console.log(e);
}
if(e.nodeType == 3){
console.log("文本节点");
console.log(e);
}
}
</script>
</body>
</html>
屏幕快照 2017-01-19 下午2.27.46.png
- children 属性，非标准的，它返回指定元素的子元素集合。它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div id="ct">
你好世界
<div id="view"><span >hello world</span></div>
</div>
<script>
var ct = document.getElementById("ct");
for(var i = 0,e; e = ct.children[i++];){
console.log(e);
}
</script>
</body>
</html>
屏幕快照 2017-01-19 下午2.30.13.png
3.查询元素有几种常见的方法？ES5的元素选择方法是什么?
- 常用的获取元素的方法有：
1、document.getElementById();
2、getElementsByClassName();
3、getElementsByTagName();
4、document.getElementsByName(); - ES5 新增方法
1、document.querySelector();
2、document.querySelectorAll();
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div id="ct">
你好世界
<div id="view"><span >hello world</span></div>
</div>
<ul>
<li class="list">1</li>
<li class="list">2</li>
<li class="list">3</li>
<li class="list">4</li>
</ul>
<script>
var ct = document.querySelector(".list");
console.log(ct);
var cts = document.querySelectorAll(".list");
console.log(cts);
</script>
</body>
</html>
屏幕快照 2017-01-19 下午2.47.35.png
4.如何创建一个元素？如何给元素设置属性？如何删除属性?
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div id="ct">
你好世界
<div id="view"><span >hello world</span></div>
</div>
<ul id = "creatnode">
</ul>
<script>
var ul = document.getElementById("creatnode");
var li = document.createElement("li");
li.setAttribute("id","newli");
li.setAttribute("class","newclass");
li.removeAttribute('class');
li.innerHTML = "hello jiregu";
ul.appendChild(li);
</script>
</body>
</html>
屏幕快照 2017-01-19 下午3.05.20.png
5.如何给页面元素添加子元素？如何删除页面元素下的子元素?
- 添加元素：
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div id="ct">
你好世界
<div id="view"><span >hello world</span></div>
</div>
<ul id = "creatnode">
</ul>
<script>
var ul = document.querySelector("#creatnode");
var frag = document.createDocumentFragment();
for(var i = 0;i<5;i++){
var li = document.createElement('li');
li.innerHTML = i;
frag.appendChild(li);
}
ul.appendChild(frag);
</script>
</body>
</html>
屏幕快照 2017-01-19 下午3.25.43.png
- 删除元素：
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div id="ct">
你好世界
<div id="view"><span >hello world</span></div>
</div>
<ul id = "creatnode">
</ul>
<script>
var ul = document.querySelector("#creatnode");
var frag = document.createDocumentFragment();
for(var i = 0;i<5;i++){
var li = document.createElement('li');
li.innerHTML = i;
frag.appendChild(li);
}
ul.appendChild(frag);
//删除元素
var ct = document.getElementById("creatnode");
for(var i = 0,e; e = ct.children[i++];){
var _parentElement = e.parentNode;
if(_parentElement){
_parentElement.removeChild(e);
i--; //remove后数长度会自动减1 这个要注意
}
}
</script>
</body>
</html>
屏幕快照 2017-01-19 下午4.07.48.png
PS：一开始由于没有加
i--，导致元素没有完全删除，后面查询资料才发现，因为通过ct.children或者ct.childNodes获取到的是类数组对象，有部分数组的特性，当对数组进行removeChild操作时，数组的长度会自动减1，这就导致下一次循环偏移。错误示例:
//删除元素
var ct = document.getElementById("creatnode");
for(var i = 0,e; e = ct.childNodes[i++];){
var _parentElement = e.parentNode;
if(_parentElement){
_parentElement.removeChild(e);
//i--; //remove后数长度会自动减1 这个要注意
}
}
错误输出：
屏幕快照 2017-01-19 下午4.16.21.png
6.element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
element.classList的方法包括：
- classList.add()用来添加一个class
- classList.remove()用来删除一个class
- classList.toggle("visible", i < 10); 添加/删除 visible，取决于测试条件，i小于10
- classList.contains()用来判断一个元素的class列表中是否包含某个class
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div id="ct">
你好世界
<div id="view"><span >hello world</span></div>
</div>
<ul id = "creatnode">
</ul>
<script>
var ul = document.querySelector("#creatnode");
var frag = document.createDocumentFragment();
for(var i = 0;i<5;i++){
var li = document.createElement('li');
li.innerHTML = i;
frag.appendChild(li);
}
ul.appendChild(frag);
var lists = ct.classList;
lists.add("hi");
lists.add("hii");
lists.remove("hii");
console.log(lists.contains("hii"));
</script>
</body>
</html>
屏幕快照 2017-01-19 下午4.30.50.png
7. 如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</btn>
</div>
<!DOCTYPE html>
<html>
<head>
<meta "charset= utf-8">
</head>
<body>
<div class="mod-tabs">
<ul style= "list-style-type:none">
<li>list1<li>
<li>list2<li>
<li>list3<li>
</ul>
<button class="btn">点我</btn>
</div>
<script>
//查找到按钮
var btn=document.querySelector('.btn');
//查找到所有的li
var Li=document.querySelectorAll('.mod-tabs ul li');
btn.onclick=function(){
for(var i=0;i<Li.length;i++){
Li[i].style.border = "solid 1px";
}
}
</script>
</body>
</html>
网友评论