操作dom_DOM文档树和节点操作

最新推荐文章于 2022-12-11 15:23:00 发布

yiyi分析亲密关系

最新推荐文章于 2022-12-11 15:23:00 发布

阅读量236

点赞数

文章标签：操作dom

本文链接：https://blog.csdn.net/weixin_35814757/article/details/112649681

版权

1 DOM文档树

1.1 DOM的定义(document object modle)

DOM就是文档对象模型。

 1/* 查看这段HTML代码中p的DOM模型 */
 2
 3    
 4        
 5        
 6    
 7    
 8        ---
 9

10 hello,mooc11 12


13        ---
14

15

`乔丹`

16

NBA最伟大的球员

17


18        ---
19

前端微专业


20    
21
22
23//在调试窗口中查看 childNodes children 对比差异
24var p = document.getElementsByTagName('p');
25var div = document.getElementById('div');
26
27console.log(p);
28console.log(div);

1.2 DOM API

 1interface Document:Node{
 2    readonly attribute  DOMImplementation implementation;
 3    readonly attribute  Element DocumentElement;
 4    Element             createElement(in DOMString tagName) 5                        raises(DOMException);
 6    DocumentFragment    createDocumentFragment();
 7    Text                createTextNode(in DOMString data);
 8    Comment             createComment(in DOMstring date);
 9    NodeList            getElementsByTagName(in DOMString tagname);
10    Element             getElementById(in DOMString elementID);

1.3 浏览器中的DOM

在浏览器中DOM和JS的关系：{JS[,DOM]};

1.4 DOM的内容

DOM的内容包括：DOM Core,DOM HTML,DOM Style,DOM Event

1.5 DOM树

 1<html>
 2    <head>
 3        <meta charset="utf-8">
 4        <link href="style.css">
 5    head>
 6    <body>
 7        <p class="mooc">
 8            hello,<span>moocspan>
 9            <img src='user.jpg'>
10        p>
11        <div>前端微专业div>
12    body>
13html>

上面这段代码的DOM树如下所示：

1.6 节点遍历

可用node.parentNode,node.firstChild,node.lastChild,node.previousSibling,node.nextSibiling来遍历DOM节点；

注：节点(node)的操作，必须是node节点，不能是nodes-collection。

1.7 节点类型

DOM节点分为：element_node,text_node,comment_node,document_type_node;
在【4.1.6】和【4.1.7】的树状图中，圆型节点表示element_node，方形节点表示text_node.

1.8 元素遍历

如下一段HTML代码：

1<p>
2    hello,<em>jerry!em>
3    欢迎来<a href="#">Chinaa>。
4p>

上面HTML代码的DOM树如下所示：

1//获取'hello，'和'。'
2p.firstChild
3p.lastChild
4
5p.firstElementChild//jerry!
6p.lastElementChild//Chia
7
8em.nextElementSibling //China
9em.previousElementSibling //null  而不是undefined！！！

2 节点操作

2.1 获取节点

通过元素关系获取节点
- `previousSibling`/`nextSibling`
- `previousElementSibling`/`nextElementSibling`
- `parentNode`
- `firstChild`/`firstElementChild`,`lastChild`/`lastElementChild`
- `childnodes`/`children`
- 父子关系
- 兄弟关系

但是，通过元素关系获取节点，可维护性很差！！！

通过接口获取关系
- `getElementById`
- `getElementsByTagName`
- `getElementsByClassName`
- `querySelector/All`

2.1-A getElementById

 1/* getElementById */
 2/* element = document.getElementById(id) */
 3---
 4<body> 5    <p id="hello" class="mooc"> 6        hello,<span>moocspan><img src="user.jpg"> 7    p> 8body> 9---10//获取id为hello的p11document.getElementById("hello")//在console面板中应该得到“p#hello.mooc”的DOM对象12

2.1-B getElementsByTagName

 1/* getElementsByTagName */
 2/* collection = element.getElementsByTagName(tagName) */
 3---
 4<div id="users"> 5    <h2>8882人在学习该课程h2> 6    <ul> 7        <li class="user">Satoshili> 8        <li class="user">春来草青li> 9        <li class="user last">Kashli>10    ul>11div>
12//切记，这里不能用p来代替div！！！
13---
14//先获取div#users对象，在用div#user对象来获取li对象
15var users = document.getElementById("users");
16//获取li
17users.getElementsByTagName("li");//[li.user,li.user,li.user.last]
18users.getElementsByTagName("li")[2];//li.user.last：Kash
19//获取全部的tag
20users.getElementsByTagName("*");//[h2,ul,li.user,li.user,li.user.last]
21/* 注：getElementsByTagName得到的collection是动态的 */

2.1-C getElementsByClassName

 1/* getElementsByClassName */
 2/* collection = element.getElementsyClassName(className) */
 3---
 4<div id="users"> 5    <h2>the story of Qin dynastyh2> 6    <ul> 7        <li class="user">Qinshi moonli> 8        <li class="user">tianxingjiugeli> 9        <li class="user last">daqindiguoli>10    ul>11div>
12---
13//先获取div#users对象，再用div#users对象来获取li对象
14var users = document.getElementById("users");
15//获取li
16users.getElementsByClassName("user");//[li.user,li.user,li.user.last]
17users.getElementsByClassName("user")[2];//[li.user.last]
18users.getElementsByClassName("user last"); !== user.getElementsByClassName("last user");//[li.user.last]
19//上面两个虽然形式上看起来一样，但是前一个是一个数组的项，后一个是一个数组。
20
21/* 兼容IE6,7,8的getElementsByClassName */
22function getElementsByClassName(root,className){
23    //特性侦测
24    if(root.getElementsByClassName){
25        //优先使用W3C规范
26        return root.getElementsByClassName(className);
27    }else{
28        //获取所有的后代元素
29        var elements = root.getElementsByTagName("*");
30        var result = [];
31        for(var i=0,element;element=elements[i];i++){
32            //选择包含有类名的元素并push到新的Array
33            if(hasClassName(element,className)){
34                result.push(element);
35            }
36        }
37        return result;
38    }
39}
40/* getElementsByClassName得到的collection是动态的 */

2.1-D querySelector/All

 1/* querySelector/All */
 2/* list = element.querySelector/All(selector) */
 3---
 4<div id="users"> 5    <h2>a faiary taleh2> 6    <ul> 7        <li class="user">for childli> 8        <li class="user">for adultli> 9        <li class="user last">for allli>10    ul>11div>
12---
13//用querySelector获取div#users
14var users = document.querySelector("#users");//div#users
15//用querySelectorAll获取.user
16users.querySelectorAll(".user");//[li.user,li.user,li.user.last]
17document.querySelectorAll("#users .user");//[li.user,li.user,li.user.last]
18/* querySelector/All得到的list是非动态的。*/

2.2 创建节点

1/* createElement(tagName) */
2/* element = document.createElement(tagName) */
3document.creatElement("div");//
4document.creatElement("a");//
5var sc = document.createElement("script");//

2.3 修改节点

2.3-A textContent

 1/* element.textContent */
 2---
 3<div class="users"> 4    <h2>there are three boysh2> 5    <ul> 6        <li class="user">oneli> 7        <li class="user">twoli> 8        <li class="user last">treeli> 9    ul>10div>
11---
12//首先获取或者创建节点
13var users = document.getElementById("users");
14//读取或修改node的内容
15users.textContent;//"there are three boys one two three"
16
17users.last.textContent;//"tree"//is this right?错啦！！！
18users.lastElementChild.lastElementChild.textContent;//"tree"
19
20users.last.textcontent = "three";//is this right?错了！！！
21users.lastElementChild.lastElementChild.textContent="three";//"three"
22/* ie9不支持textContent */

2.3-B innerText

 1/* element.innerText */
 2//兼容firefox
 3if(!('innerText'in document.body)){
 4    HTMLElement.prototype._defineGetter_("innerText",function(){
 5        return this.textContent;
 6    });
 7    HTMLElement.prototype._defineSetter_("innerText",function(s){
 8        return this.TextContent=s;
 9    });
10}

2.4 插入节点

2.4-A appendChild

 1/* appendChild */
 2/* var achild = element.appendChild(achild); */
 3---
 4<div id="users"> 5    <h2>I can do what I want to doh2> 6    <ul> 7        <li class="user"> 8            <img src="4.jpg"> 9            <a href="/user/4">lifenga>10        li>11    ul>12div>13---14//完场上述HTML段落15var users = document.getElementById("users");//获得div#user节点16var h2 = document.createElement("h2");//创建h217var ul = document.createElement("ul");//创建ul18users.appendChild(h2);//添加h2到div#users19users.appendChild(ul);//添加ul到div#users20var li = document.createElement("li");//创建li21li.className = "user";//li的className22ul.appendChild(li);//添加li到ul23var img = document.createElement("img");//创建img24img.src = "4.jpg";//设置img的src25li.appendChild(img);//添加img到li26var a = document.createElement("a");//创建a27a.href = "/user/4";//设置a的href28a.innerText = "lifeng";//设置a的innerText29li.appendChild(a);//添加a到li30

2.4-B insertBefore

 1/* insertBefore */
 2element.insertBefore(achild,referenceChild);
 3---
 4<div id="users"> 5    <h2>you need to work harderh2> 6    <ul>ul> 7div>
 8---
 9//完成上述需求
10var users = document.getElementById("users");//获取div#users
11var h2 = document.createElement("h2");//创建h2
12var ul = document.createElement("ul");//创建ul
13users.appendChild(ul);//插入ul
14users.insertBefore(h2,ul);//在ul前面插h2

2.5 删除节点

1/* removeChild */
2/* element.removeChild(child) */
3var user2 = users.getElementByClassName("user2");//获取到.user2
4user2.parentNode.removeChild(user2);//通过user2.parentNode来删除user2

2.6 innerHTML

 1/* element.innerHTML */
 2---
 3

 4     5         6        yahoo 7     8
 9---
10//用innerHTML方法在ul#users下添加元素
11var users = document.getElementById("users");//获取ul#users
12var li = document.createElement("li");//创建li
13li.className="user";//设置li的className
14users.appendChild(li);//把li.user插入ul#users中
15li.innerHTML = '\
16                yahoo';//用innerHTML插入li.user中的内容。
17
18//如果要用前面的常规方法，则需要下面的一串代码：
19var img = document.createElement("img");//创建img
20img.src="4.jpg";//设置img的src
21users.appendChild(img);//把img插入到ul#users中
22var a = document.createElement("a");//创建a
23a.href = "/user/4";//设置a元素的href
24a.innerText = "yahoo";//设置a元素的innerText
25users.appendChild(a);//把a元素插入到ul#users中