JavaScript 文档对象模型(Dom)


Dom分层

文档对象模型采用的分层结构为树形结构，以树节点的方式表示文档中的各种内容。

1.在文档对象中，每一个元素对象都可以称之为节点
2.html可以说是根节点。
3.如果多个节点在同一个层次，并且拥有这相同的父节点，那么这几个节点就称之为兄弟节点。
4.一个节点之上的节点称之为父节点，一个节点之下的节点称之为子节点。
5.在树形结构最底部的节点被称为叶子节点。
示范案例：

1
2
3
4
5
6
7
8
9
<html>                                            <html>
<head>                                          ↙      ↘
<title>标题内容</title>                      <head>    <body>     
</head>                                     ↙           ↓   ↘
<body>                                  <title>        <h3>   <b>
<h3>三号标题</h3>                          ↓          ↙        ↓
<b>加粗内容</b>                         标题内容   3号标题    加粗内容
</body>
<html>

访问指定节点

访问指定节点有1个方法和3个属性。
1.document.getElementById()方法。
2.nodeName属性。 //获取某一个节点的名称
3.nodeType属性。 //获取某个节点的类型 返回的都是整型，1代表元素节点，2代表属性节点，3代表文本节点
4.nodeValue属性。 //返回节点的值

1
2
document.write(document.getElementById("Body").nodeName);//这样写属实用不了，不知道为啥视频教学可以
document.write(document.body.nodeName)//网上这么教我也这么打，还是报错

一下是真的正确的代码上面代码运行错误是因为script脚本写body上面，根本读取不到body。

1
2
3
4
5
6
var str;
var by=document.body
str="节点名称："+by.nodeName+"<br>";
str+="节点类型："+by.nodeType+"<br>";
str+="节点值："+by.nodeValue+"<br>";
document.write(str);

返回值:
节点名称：BODY
节点类型：1
节点值：null

遍历文档树

1.parentNode属性，返回当前节点的父节点。
2.firstChild属性，返回当前节点的第一个子节点。
3.lastChild属性，返回当前节点的最后一个子节点。
4.previousSibling属性，返回当前节点的前一个兄弟节点。
5.nbextSibling属性，返回当前节点的后一个兄弟节点。
注意：如果返回的节点不存在，那么返回值会是nulll。
hasChildNodes属性，检查是否拥有子节点，有则返回true无则flase。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="gb2312">
<title>遍历文档树</title>
</head>
<body>
<h3 id="h">三号标题</h3>
<b>加粗内容</b>
<form name="for" method="GET" action="#">
节点名称：<input type="text" id="mc" ><br>
节点类型：<input type="text" id="lx" ><br>
节点的值：<input type="text" id="dz" ><br>
<input type="button" value="父节点" onclick="text=play(text,'parent')">
<input type="button" value="第一个子节点" onclick="text=play(text,'first')">
<input type="button" value="最后一个子节点" onclick="text=play(text,'last')">
<input type="button" value="前一个兄弟节点" onclick="text=play(text,'previous')">
<input type="button" value="最后一个兄弟节点" onclick="text=play(text,'next')">
<input type="button" value="返回根节点" onclick="txt=document.documentElement;toplay(txt)">
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script type="text/javascript">
function toplay(name){
        window.document.for.mc.value=name.nodeName;
        window.document.for.lx.value=name.nodeType;
        window.document.for.dz.value=name.nodeValue;
}
function play(err,nodeName){
    switch (nodeName){
        case "parent":
            if(err.parentNode){
                err=err.parentNode;
            }else 
            alert("无父亲节点");
            break;
        case "first":
            if(err.hasChildNodes()){
                err=err.firstChild;
            }else
            alert("无子节点");
            break;
        case "last":
            if(err.hasChildNodes()){
                err=err.lastChild;
            }else 
            alert("无子节点");
            break;
        case "previous":
            if(err.previousSibling){
                err=err.previousSibling;
            }else 
            alert("无兄弟节点");
            break;
        case "next":
            if(err.nextSibling){
                err=err.nextSibling;
            }else 
            alert("无兄弟节点");
            break;
            }         
        toplay(err);
         return err;       //return会导致继承text,关了就是undefined
    }
    var text=document.documentElement;
    toplay(text);
</script>
</body>
</html>

细节打磨有待优化，那个返回根节点。

节点操作

创建新节点有3个方法 以下方法要跟着document
1.createElement()方法 创建新元素                    elememt翻译：要素；基本部分；典型部分；少量；有点；有些,个人觉得可以翻译成元素啥的。
2.createTextNode()方法 创建文本节点
3.appendChild()方法 将新的子节点添加到当前节点的末尾
appendChild()语法格式：obj.appendChild(newChild)。
obj：在该节点末尾末尾插入新节点。
newChild：新的子节点。
示范案例一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
</head>
<script type="text/javascript">
    function play(){
    var value = document.createElement("b");
    var txt = document.createTextNode("我是文本节点创造物！");
    value.appendChild(txt);
    document.body.appendChild(value);
    }
</script>
<body onload="play()">
</body>
</html>

返回值：我是文本节点创造物！
没错，他加粗了，这和createElement内的”b”有关，换成u是下划线，
这玩意儿似乎可以填很多元素属性，反正是元素节点，啥都可以填，如div,p。
注：createElement内似乎是必填？要不显示怎么也得填个null或者”null”（一样没区别）。

创建多个节点：

示范案例二：

1
2
3
4
5
6
7
8
9
10
11
12
13
<body onload="play()">
<script>
function play(){
    var txt=['1号','2号','3号','4号','5号']
    for(var i=0;i<txt.length;i++){
        var a=document.createElement('p');
        var b=document.createTextNode(txt[i]);
        a.appendChild(b);
        document.body.appendChild(a);
    }
}
</script>
</body>

运行结果：
1号

2号

3号

4号

5号

每次刷新加载页面会使浏览器变的缓慢，让我们看下面这个新方法。

createDocumentFragment() 方法用来创建文件碎片节点。
这个方法本身创建的是一个虚拟的节点对象，可以包含各种类型的节点，在创建之初是空的。
DocumentFragment节点不属于文档树，继承的parentNode属性总是null。
如果要插入DocumentFragment节点，那么插入的不是它自身，而是它的所有子孙节点。
如果把dom元素放documentfragment里再用它来添加到页面可以减少页面渲染dom的次数，效率会提升。
如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。//摘的，没测试。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body onload="play()">
<script>
function play(){
    var qaq=document.createDocumentFragment();
    var txt=['1号','2号','3号','4号','5号']
    for(var i=0;i<txt.length;i++){
        var a=document.createElement('p');
        var b=document.createTextNode(txt[i]);
        a.appendChild(b);
        qaq.appendChild(a);
    }
    document.body.appendChild(qaq);
}
</script>
</body>

乍一看好像没什么，浪费资源套娃，不理解这个东西。
反正这个方法是虚拟节点，appendChild出来的都是他子孙不是他自己。？？？谁来好像都一样？
不过貌似能提高加载资源（在多用dom元素），也不知道真假。

插入和追加

insertBefore(new,ref)
new:新的子节点。
ref:在该节点前插入新节点。
都是必填。函数本身就是之前，ref又是之前，2个之前插入的。
都是必填。函数本身就是之前，ref又是之前，2个之前插入的。

1
2
3
4
5
<h2 id="h">在上面插入节点</h2>
<form name="frm">输入文本：
<input type="text" name=txt>
<input type="button" value="前插入" onclick="play('h',document.frm.txt.value)">
</form>

下面看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function run(str){
        var a=document.createElement("p");
        var b=document.createTextNode(str);
        a.appendChild(b);
        return a;
    }
    function play(nodeId,str){
        var q=document.getElementById(nodeId);
        var txt=run(str);
        if(q.parentNode){
            q.parentNode.insertBefore(txt,q);
        }
    }

节点复制

语法格式：obj.cloneNode(deep)
obj:要复制的节点。
deep：Boolean值，表示是否为深度复制，true表示要深度复制，false表示简单复制。
深度复制：当前节点的全部子节点也复制。
简单复制：只复制当前节点，不复制子节点。

节点删除

语法格式：obj.removeChild(oldChild)
oldChild:要删除的节点。

1
2
3
4
5
6
<div id="di">
    <p>第一行文本</p>
    <p>第二行文本</p>
    <p>第三行文本</p>
</div>
    <button onclick="play()" >点我删除</button>

先创建div元素，接下来看代码。

1
2
3
4
5
6
function play(){
        var a = document.getElementById("di");
        if(a.hasChildNodes()){
            a.removeChild(a.lastChild)
        }
    }

单击按钮就会删除最后一个p元素标签。

替换节点

语法格式：obj.replaChild(new,old)
new:替换后的新节点。
old：需要被替换的旧节点。

1
2
3
4
5
6
<b id="bb">可以添加新内容</b>
<form id="frm">
<input type="text" name="bj"><br>
<input type="text" name="txt"><br>
<input type="button" onclick="run(bj.value,txt.value)" value="插入">
</form>

下面看代码。

1
2
3
4
5
6
7
8
9
10
function run(bj,txt){
    var a=document.getElementById('bb');
    if(a){
        var node=document.createElement(bj);
        node.id="bb"
        var nodetxt=document.createTextNode(txt);
        node.appendChild(nodetxt);
        a.parentNode.replaceChild(node,a);
    }
    }

运行结果：

可以添加新内容，好吧其实是插入？
txt框:用户输入
txt框:用户输入
按钮:value=插入

node.id的存在可以一直让文本替换成功。

题外话

document.documeneElement 属性，居然是返回文档元素，比如html文档返回html元素，
如果缺失元素会返回null，这个元素要用nodeName之类的才能操作查看。
childNodes()方法可以返回其下的子元素的集合。
createElement() 创建一个元素节点 => 接收参数为string类型的nodename
createTextNode() 创建一个文本节点 => 接收参数为string类型的text内容
createAttribute() 创建一个属性节点 => 接收参数为string类型的属性名称
createComment() 创建一个注释节点 => 接收参数为string类型的注释文本

通过元素的name属性获取元素 document.getElementByName()
通过元素的id属性获取元素 document.getElementById()
做个垃圾导航。(getElementByid)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<div>
 <table border="0" align="center" cellspacing="0" cellpadding="0" wid="1206">
    <tr>
        <td><div class="i01w">
            <table cellspacing="0" cellpadding="0" width="100%" border="0">
                <tr>
                <td id="a0bg"><span id="a0color" onmouseover="run('a0','a0color','a0bg')">首页</span></td>
                <td id="a1bg"><span id="a1color" onmouseover="run('a1','a1color','a1bg')">爱情片</span></td>
                <td id="a2bg"><span id="a2color" onmouseover="run('a2','a2color','a2bg')">科幻片</span></td>
                </tr>
            </table>
        </div></td>   
    </tr>
    <tr>
        <td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0">
            <tr>
                <td align="left" style="padding-left:12px">欢迎来到我的博客</td>
            </tr>
            </table>
            <table id="a1" style="display: none;" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
            <tr>
                <td style="padding-left:97px" align="left"><ul class="i02w">
                    <li>爱情喜剧</li>
                    <li>古典爱情</li>
                    <li>现代爱情</li>
                    </ul></td></tr></table>
                    <table id="a2" style="display: none;" height="41" cellspacing="0" cellpadding="0" width="100%" border="0">
                        <tr>
                            <td style="padding-left:292px" align="left"><ul class="i02w">
                                <li>枪战片</li>
                                <li>武侠片</li>
                                <li>魔幻片</li>
                                </ul></td></tr></table>
                            </td> 
    </tr>
 </table>   
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function run(par,par2,par3){
    document.getElementById("a0").style.display="none";
    document.getElementById("a1").style.display="none";
    document.getElementById("a2").style.display="none";

    document.getElementById("a0color").style.color="";
    document.getElementById("a1color").style.color="";
    document.getElementById("a2color").style.color="";

    document.getElementById("a0bg").style.backgroundImage="";
    document.getElementById("a1bg").style.backgroundImage="";
    document.getElementById("a2bg").style.backgroundImage="";

    document.getElementById(par).style.display="";
    document.getElementById(par2).style.color="#ff0044";
    document.getElementById(par3).style.backgroundImage="";
}

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

年轻人打算写博客玩<br><br>诶~没错就是玩<br><br>玩nm！