-
一,创建新的 HTML 元素 (节点) - appendChild()
-
//标签 <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> //dom操作 //为 <p> 元素添加文本节点: var para = document.createElement("p"); //将文本节点添加到 <p> 元素中: var node = document.createTextNode("这是一个新的段落1。"); //最后,在一个已存在的元素中添加 p 元素。 para.appendChild(node); //最后,在一个已存在的元素中添加 p 元素。查找已存在的元素: var element = document.getElementById("div1"); //最后,在一个已存在的元素中添加 p 元素。添加到已存在的元素中: element.appendChild(para);
-
-
二,创建新的 HTML 元素 (节点) - insertBefore()
-
var para1 = document.createElement("p"); var node1 = document.createTextNode("这是一个新的段落2。"); para1.appendChild(node1); var element1 = document.getElementById("div1"); var child1 = document.getElementById("p1"); element1.insertBefore(para1, child1);
-
-
三,移除已存在的元素(节点) - removeChild()
-
//查找 id="div1" 的元素: var parent = document.getElementById("div1"); //查找 id="p1" 的 <p> 元素: var child = document.getElementById("p1"); //从父元素中移除子节点: parent.removeChild(child);
-
-
四,替换 HTML 元素(节点) - replaceChild()
-
var para2 = document.createElement("p"); var node2 = document.createTextNode("这是一个新的段落3。"); para2.appendChild(node2); var parent2 = document.getElementById("div1"); var child2 = document.getElementById("p2"); parent.replaceChild(para2, child2);
-
-
五,HTMLCollection 对象
- 1,getElementsByTagName() 方法返回 HTMLCollection 对象。
- var myCollection = document.getElementsByTagName("p");
- 2,集合中的元素可以通过索引(以 0 为起始位置)来访问。
- myCollection[1]
- 3,HTMLCollection 对象的 length 属性定义了集合中元素的数量
- myCollection.length
- 4,遍历元素个数
-
var myCollection = document.getElementsByTagName("p"); var i; for (i = 0; i < myCollection.length; i++) { myCollection[i].style.backgroundColor = "red"; }
-
- 5,注意:
- HTMLCollection 不是一个数组!
- 可以像数组一样,使用索引来获取元素
- 1,getElementsByTagName() 方法返回 HTMLCollection 对象。
-
六,NodeList对象
- 1,所有浏览器的 childNodes 属性返回的是 NodeList 对象
- var myNodeList = document.childNodes;
- 2,大部分浏览器的 querySelectorAll() 返回 NodeList 对象
- var myNodeList = document.querySelectorAll("p");
- 3,一些旧版本浏览器中的方法(如:getElementsByClassName())返回的是 NodeList 对象,而不是 HTMLCollection 对象
- 4,NodeList 中的元素可以通过索引(以 0 为起始位置)来访问
- y = myNodeList[1]
- 5,NodeList 对象 length 属性定义了节点列表中元素的数量
- myNodelist.length
- 6,遍历元素
-
var myNodelist = document.querySelectorAll("p"); var i; for (i = 0; i < myNodelist.length; i++) { myNodelist[i].style.backgroundColor = "red"; }
-
- 1,所有浏览器的 childNodes 属性返回的是 NodeList 对象
-
七,HTMLCollection 与 NodeList 的区别
- 相同点:
- NodeList 与 HTMLCollection 有很多类似的地方。
- NodeList 与 HTMLCollection 都与数组对象有点类似,可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
- NodeList 与 HTMLCollection 都有 length 属性。
- HTMLCollection 元素可以通过 name,id 或索引来获取
- 无法使用数组的方法: valueOf(), pop(), push(), 或 join()
- 不同点:
- HTMLCollection 是 HTML 元素的集合;NodeList 是一个文档节点的集合。
- NodeList 只能通过索引来获取;HTMLCollection 元素可以通过 name,id 或索引来获取
- 只有 NodeList 对象有包含属性节点和文本节点
- 相同点:
114_js笔记16_节点元素的dom操作 + HTMLCollection + NodeList
猜你喜欢
转载自blog.csdn.net/a_horse/article/details/84561392
今日推荐
周排行