进阶8 DOM操作
2017-09-20 本文已影响0人
饥人谷_哈噜噜
1. dom对象的innerText和innerHTML有什么区别？
- innerText：获取元素内的的所有文本内容
- innerHTML：获取元素内的HTML结构（从对象的起始位置到终止位置的全部内容,包括Html标签）
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="div1">
<p>innerText</p>
<span>innerText</span>
</div>
<div id="div2">
<p>innerHTML</p>
<span>innerHTML</span>
</div>
</body>
</html>
var myText = document.getElementById("div1")
console.log(myText)
console.log(myText.innerText)
var myHTML = document.getElementById("div2")
console.log(myHTML)
console.log(myHTML.innerHTML)
进阶8-1测试.jpg
2. elem.children和elem.childNodes的区别？
-
elem.children：获取当前元素的所有子元素节点（只返回html节点，不返回文本节点）。 -
elem.childNodes：获取当前元素的所有子节点（文本节点或者元素节点），childNodes中保存着一个NodeList类数组对象（有length属性但并不是Array的实例），可通过方括号语法来访问NodeList的值。
3. 查询元素有几种常见的方法？ES5的元素选择方法是什么?
- document方法：
-
getElementById():返回匹配指定ID属性的元素节点，如果没有发现匹配的节点，则返回null。这也是获取一个元素最快的方法 -
getElementsByClassName():返回一个类似数组的对象，包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回的结果中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。 -
getElementsByTagName():返回所有指定标签的元素（搜索范围包括本身）。返回值是一个HTMLCollection对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。这个方法不仅可以在document对象上调用，也可以在任何元素节点上调用。 -
getElementsByName():适用于拥有name属性的HTML元素，（比如<form>、<input>、<img>、<frame>、<a>和<object>等），返回一个NodeList格式的对象，不会实时反应元素的变化
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="content">
<h4 class="title">hello world！</h4>
<h4 class="title">hello jirengu！</h4>
<p>good good study! day day up!</p>
<lable>sex:</lable>
<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女
</div>
<h4 class="title" id="newh4">hello world！hello jirengu！</h4>
</body>
</html>
console.log(document.getElementById("content"))
console.log(document.getElementsByClassName("title"))
console.log(document.getElementsByTagName("p"))
console.log(document.getElementsByName("sex"))
进阶8-3[1]测试.png
- ES5
-
document.querySelector()：接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null -
document.querySelectorAll()：与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。
-
进阶8-3测试[2].jpg
4. 如何创建一个元素？如何给元素设置属性？如何删除属性
- 创建元素
- 创建元素：
document.createElement(tagName)：用来生成HTML元素节点，参数为引号包裹的元素的标签名。 - 创建文本节点：
document.createTextNode(content)：用来生成文本节点，参数为所要生成的文本节点的内容。 - 创建DOM片段：
element.createDocumentFragment()：生成一个DocumentFragment对象。该对象是一个存在于内存的DOM片段，不属于当前文档，常用来生成较复杂的DOM结构，然后插入当前文档。这样做的好处在于，因为DocumentFragment不属于当前文档，对它的任何改动，都不会引发网页的重新渲染，比直接修改当前文档的DOM有更好的性能表现。
进阶8-4初始代码.png
进阶8-4创建.png
进阶8-4测试[1].png
- 创建元素：
- 设置属性：
element.setAttribute(attr,value)
进阶8-4设置属性.png
进阶8-4[2]测试.png
- 删除属性：
element.romoveAttribute(attr)
进阶8-4删除属性.png
进阶8-4测试[3].png
html部分：
<div id = "content">
<h4 class="title">hello world!</h4>
<p>good good study! day day up! </p>
</div>
var newTitle = document.createElement("h2");
var newTitle.id = "myTitle";
var newContent = document.createTextNode("hello jirengu");
newTitle.appendChild(newContent);
document.body.appendChild(newTitle);
myTitle.setAttribute("Classname","title");
mtTitle.removeAttribute("id");
5. 如何给页面元素添加子元素？如何删除页面元素下的子元素?
- 添加：
element.appendChild("newElement")//在页面元素末尾添加需要添加元素 - 删除：
element.removeChild("oldElement")//删除页面元素里需要删除的元素 - 替换：
element.replaceChild("newElement","oldElement")//替换页面元素里一个元素
6. element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
var ele = document.createElement('div');
ele.setAttribute('class','box1 box2 box3');
ele.classList //['box1','box2','box3']
ele.classList.add('box4') //添加一个class
ele.classList.contains('box4') //是否包含box4返回true
ele.classList.remove('box3') //删除class中的box3
ele.classList.toString() //将类数组对象转为字符串 "box1 box2 box4"
7. 如何选中如下代码所有的li元素？ 如何选中btn元素？
<div class="mod-tabs">
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<button class="btn">点我</button>
</div>
选中所有的li元素：
var allLi1 = document.getElementsByTagName("li");
console.log(allLi1)
var allLi2 = document.querySelectorAll(".mod-tabs li")
console.log(allLi2)
进阶8-7测试[1].png
选中btn元素：
var btn1 = document.getElementsByClassName("btn");
console.log(btn1)
var btn2 = document.querySelector(".btn")
console.log(btn2)
进阶8-7测试[2].png
