第4章操作DOM

https://blog.csdn.net/fengwei4618/article/details/78025522

目标

DOM介绍
遍历DOM
使用DOM

DOM 的作用

获取DOM是为了将来用js动态操作它。

DOM介绍

DOM:Document Object Model
他的组成部分介绍：文档、对象和模型
1)Document(文档)：当用浏览器打开一个页面文档时，这个文档就会被转成
document对象，然后就可以调用了。后面会提到该对象的用法。
2)Object(对象)：DOM中的每个节点都是对象，通过对象的属性和方法就能够操作节点。
Model(模型)：DOM将整个文档划分成节点树结构，如下：

image.png

节点种类

<div id="box1">测试div</div>

image.png

元素节点：其实就是标签<div></div>
属性节点：其实就是标签的属性 id="box1"
文本节点:标签里夹的文本测试div

https://www.cnblogs.com/zhaowy/p/9183334.html

1、元素节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            
            //node-节点为元素节点类型,nodeType=1 nodeName 为实际标签名 nodeValue值为null
            var box=document.getElementById("box");
            alert("节点类型："+box.nodeType);  //1
            alert("节点名称："+box.nodeName);   //div
            alert("节点值："+box.nodeValue);    //null
        </script>
    </head>
    <body>
          <div id="box">测试div</div>
    </body>
</html>

上面的代码不会弹出窗口。为什么
因为DOM操作必须等待HTML文档加载完毕才可以获取。顺序执行时还没有获取到

方案一：把代码放在最下面
方案二：把代码写到window.onload事件里。等页面加载完毕再执行

window.onload=function(){
//你的js代码
}
改写成这样：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload=function(){
            //node-节点为元素节点类型,nodeType=1 nodeName 为实际标签名 nodeValue值为null
            var box=document.getElementById("box");
            alert("节点类型："+box.nodeType);  //1
            alert("节点名称："+box.nodeName);   //div
            alert("节点值："+box.nodeValue);    //null
            }
        </script>
    </head>
    <body>
          <div id="box">测试div</div>
    </body>
</html>

## DOM获取元素节点的方法 ##
getElementById()    一个对象
getElementsByName()       对象集合 name
getElementsByClassName()   对象集合 通过类名
getElementsByTagName()    对象集合 标签名

getAttribute()
setAttribute()
removeAttribute()

### getElementsByName() ##

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function show(){
                var cs=document.getElementsByName("testName");
                for(var i=0;i<cs.length;i++){
                    alert(cs[i].name);//testName
                    alert(cs[i].nodeName);//input
                    alert(cs[i].nodeValue);//null
                }
            }
        </script>
    </head>
    <body>
    班级类型：
    <input type="radio" name="testName" value="1"/>社会个体
    <input type="radio" name="testName" value="2"/>高校个体
    <input type="radio" name="testName" value="3"/>小学期
    <input type="button" value="打印元素情况" onclick="show();"/>
    </body>
</html>

getElementsByClassName()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function show(){
                var cs=document.getElementsByClassName("testName");
                for(var i=0;i<cs.length;i++){
                    alert(cs[i].nodeName);//input
                    alert(cs[i].nodeValue);//null
                }
            }
        </script>
    </head>
    <body>
    班级类型：
    <input type="radio" class="testName" value="1"/>社会个体
    <input type="radio" class="testName" value="2"/>高校个体
    <input type="radio" class="testName" value="3"/>小学期
    <input type="button" value="打印元素情况" onclick="show();"/>
    </body>
</html>

getElementsByTagName()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function show(){
                var cs=document.getElementsByTagName("input");
                for(var i=0;i<cs.length;i++){
                    alert(cs[i].nodeName);//input
                    alert(cs[i].nodeValue);//null
                }
            }
        </script>
    </head>
    <body>
    班级类型：
    <input type="radio" class="testName" value="1"/>社会个体
    <input type="radio" class="testName" value="2"/>高校个体
    <input type="radio" class="testName" value="3"/>小学期
    <input type="button" value="打印元素情况" onclick="show();"/>
    </body>
</html>

使用建议：

如果获取的元素节点是唯一的，最好通过ID方式来获取，直接返回单一元素对象。而其他三种都是返回元素集合，就算只获取到一个元素，也要用指定下标获取元素对象，所以在一次性获取多个符合要求的元素节点时，使用getElementsXxx()系列方法会更方便。
其中通过name属性值的获取元素节点集合方法一般用于表单元素中。

获取层次节点/获取父or子or兄弟元素

parentNode 父级元素
nextElementSlibing 下一个兄弟
previousElementSlibing 上一个兄弟
children 子节点忽略空白节点
childNodes 子节点包含空白节点（不建议）
firstElementChild 第一个子元素节点
lastElementChild 最后一个子元素节点
firstChild/lastChild 第一个/最后一个节点，包括空白text节点（不建议）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        window.onload = function() {
            //通过id获取div_1
            var div_1 = document.getElementById("div_1");
            // parentNode 父级元素
            console.log("父节点")
            var parent = div_1.parentNode;
            console.log(parent);
            
            
            
            console.log("兄弟")
            //同辈 nextElementSlibing 下一个兄弟
            var nextSibling = div_1.nextSibling; //包括空白节点 （空格，不建议用）
            console.log("nextSibling:" + nextSibling);
            var nextElementSibling = div_1.nextElementSibling; //不包括空白节点，用带Element的
            console.log("nextElementSibling:");
            console.log(nextElementSibling);
            // previousElementSlibing 上一个兄弟
            var previousElement = div_1.previousElementSibling; //不包括空白节点，用带Element的
            console.log("previousElement:");
            console.log(previousElement);

            //小辈 children 子节点 忽略空白节点
            // childNodes 子节点 包含空白节点（不建议）
            // firstElementChild 第一个子元素节点
            // lastElementChild 最后一个子元素节点
            // firstChild/lastChild 第一个/最后一个节点，包括空白text节点（不建议）
        }
    </script>
</head>
<body>
    <div class="div_0">
        0000000
    </div>
    <div id="div_1">
        <p>P元素文本</p>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
        <input type="text" value="NIUBI" id="in_1" />
        <button>按钮</button>
        <button>按钮2</button>
    </div>
    <div class="div_2">
        121212
    </div>
</body>
</html>

DOM节点实现增删改查

查询节点上面已提到。获取元素节点后，可以通过节点对象的以下方法对文档结构进行增删改外加复制。

创建

createElement("元素标签") 创建一个元素节点。
createAttribute("属性名") 创建属性节点(不常用)。使用setAttribute()更方便。
createTextNode("文本内容") 创建文本节点。

添加

appendChild(element) 向节点的子节点列表末尾添加新的子节点
insertBefore(添加的元素节点，已知子节点) 在已知子节点前插入一个新的子节点

删除节点

removeChild(elementNode) 删除指定的元素节点
removeAttribute(attributeNode) 删除指定的属性节点

替换节点

replaceChild(newElement, oldElement) 原有的老节点消失，新节点替换老节点位置。注意两者节点类型要一致。

复制节点

nodeObject.cloneNode(boolean) true克隆当前节点以及所有子节点；false只克隆当前节点。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
//添加P元素到body元素节点中，默认为子节点尾部。
document.getElementById("btn_1").onclick = function(){
var creP = document.createElement("p");
creP.innerText = "--创建的P元素节点--";
document.body.appendChild(creP);
}
//创建一个p元素节点，并插入到body元素的第一个子节点
document.getElementById("btn_2").onclick = function(){
var creP = document.createElement("p");
creP.innerText = "--插入到第一位的P元素节点--";
//拿到body元素的第一个元素节点，将p元素放在它之前
document.body.insertBefore(creP, document.body.firstElementChild);
}
//创建文本节点并插入到调用该函数的元素节点中
document.getElementById("btn_3").onclick = function(){
var creText = document.createTextNode("创建的文本节点");
this.appendChild(creText);
}

}
//删除body元素中第一个子节点
function deleteFirstChild(){
var bodys = document.body;
bodys.removeChild(bodys.firstChild);
}
//把body元素节点第一个子节点替换成指定元素节点的第一个子节点
function repalceFirstNode(id){
var firstChild = document.body.firstElementChild;
var idTest = document.getElementById(id);
idTest.replaceChild(firstChild, idTest.childNodes[0]);
}
//把body元素节点的第一个子节点的文本内容替换成指定元素节点的第一个文本节点
function repalceText(id){
var firstText = document.body.firstElementChild.innerText; //拿到body元素中的第一个子节点的文本内容
var creText = document.createTextNode(firstText);//创建文本节点
var idTest = document.getElementById(id);
idTest.replaceChild(creText, idTest.childNodes[0]);//新文本节点替换成获取指定元素节点的第一个子节点(可能是空白文本)
}
//克隆前三个按钮元素节点
function closeBtn(){
var buttons = document.getElementsByTagName("button");
for(var i = 0; i < 3; i++){
document.getElementById("div_2").appendChild(buttons[i].cloneNode(true)); //深度克隆，包含所有子节点
}
}
</script>
</head>
<body>
<button id="btn_1">body元素中常规插入P元素</button>
<button id="btn_2">P元素节点插入到第一个</button>
<button id="btn_3">点击我更换按钮文本</button><br>
<button id="btn_4" onclick="deleteFirstChild()">删除body元素中的第一个子节点</button>
<button  onclick="repalceText('div_2')">替换文本节点</button>
<button  onclick="repalceFirstNode('div_2')">替换第一个子节点</button>
<button  onclick="closeBtn()">克隆前三个按钮到div_2中</button>
<div id="div_1">
第一个div
</div>
<div id="div_2">
第二个div
</div>
</body>
</html>

小例子##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            var arr=new Array("#80cc80","#c0aac0")
            function create() {
                for (i=0; i < 10; i++) {
                    tmp=document.all.mytable.insertRow().insertCell()
                    tmp.innerText="line"+i;
                    tmp.style.background=arr[i%arr.length]
                }
            }
        </script>
    </head>
    <body bgcolor="#ffffff">
    <TABLE id="mytable"></TABLE>
    <input type="button" value="创建" onclick="create()"/>
    </body>
    </html>


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr=new Array("#80cc80","#c0aac0")
        function create() {
           //1、需要获取table
           var table=document.getElementById("mytable");
           
           //循环创建10个tr td
           for (var i = 0; i < 10; i++) {
            var tr=document.createElement("tr");//<tr></tr>
            var td=document.createElement("td");//<td></td>
            td.style.backgroundColor=arr[i%2];
            td.innerHTML="line"+i;
            tr.appendChild(td);//<tr><td></td></tr>
            //追加到 table后面
            table.appendChild(tr);
         }
        }
    </script>
</head>
<body bgcolor="#ffffff">
    <TABLE id="mytable"></TABLE>
    <input type="button" value="创建" onclick="create()" />
</body>

2、DOM操作属性节点

属性是元素的一部分，所以只有获得元素节点后，才能获取和设置属性节点。

getAttribute("属性名") 通过指定属性名，获取属性值
setAttribute("属性名","新属性值") 如果属性名存在，则更改属性值。如果不存在，则创建一个新属性并赋值。
简便形式：element.属性名可以获取和设置指定属性的属性值。但该属性必须存在。
element.removeAttribute("属性") 删除元素节点的指定属性名
element.attributes 返回元素节点中包含所有属性的集合

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script>
window.onload=function(){
var inNode = document.getElementById("in");
 //获取元素节点
//修改属性值
inNode.setAttribute("value", "新用户");
inNode.setAttribute("type", "button");
console.log(inNode.getAttribute("value") + "," + inNode.getAttribute("type"));
//添加新属性
inNode.setAttribute("newAttr", "瞎搞的");
//简便方式
inNode.type = "radio";
inNode.value = "单选框";
console.log("简便方式：" + inNode.type + "," + inNode.value);

inNode.removeAttribute("name"); //删除name属性
//获取当前元素节点的所有属性
var allAttr = inNode.attributes;
for(var i = 0; i < allAttr.length; i++){
console.log(allAttr[i]);//打印属性到控制台
}
}
</script>

</head>
<body>
<input type="text" id="in" name="username" value="用户">用户
</body>
</html>

3、DOM操作文本节点

DOM将元素中的文本内容当作节点层次之一，即文本节点，文本节点是TextNode对象。
下面文本节点的属性我只列出了一个文本节点独有属性data，但文本节点也是Node对象，所以依然可用其他节点属性，例如nodeName/Type/Value、获取相关层次节点等属性，而length属性和data.length差不多。
文本节点中最容易出现的兼容问题就是空白文本节点，后面会说到怎么解决。
除了通过文本节点的方法和属性来处理文本节点(前提是要获取到文本节点)；还可以将文本内容提取成字符串，处理后，再放回去。关于这两种操作的用法后面会依次介绍。

属性

data 设置或获取 TextNode 对象的值。

方法

appendData(string) 添加字符串到文本节点末尾处。
insertData(offset, string) 从offset指定位置插入string
deleteData(offset, count) 从offset起删除count个字符
replaceData(off,count,string) 从off起将count个字符用string替换
splitText(offset) 从offset起将文本节点分割
substringData(offset, count) 返回从offset起的count个字符

关于空白文本节点

导致空白文本节点的原因：当标签换行，就会产生一个换行符，或者打一个空格，浏览器解析时会把他们当做空白文本节点。
在获取第一个子节点时极容易获取到空白文本节点。那怎么避免空白文本节点呢？
一是所有标签写一行，但这不符合代码美感。
二是将文本内容单独存储在一个元素子节点中，避免元素子节点同时存在文本节点和元素节点，这样再通过firstElementChild和children等属性就只拿到元素节点，再单独对该节点进行处理。

解决空白节点后，下面开始操作文本节点，这里采用文本节点的方法来处理文本内容，使用方法类似于字符串。下面是一个综合案例：

  <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
      </head>
    <body>
    <div id="p_2">
    <div>面朝大海</div>
    <p>春暖化开</p>
    <button onclick="appendStr()">添加文本</button>
    <button onclick="insertStr()">插入文本</button>
    <button onclick="deleteStr()">删除指定文本</button>
    <button onclick="replaceStr()">替换文本</button>
    <button onclick="split()">切割文本</button>
    <button onclick="subString()">保留前2个文本字符</button>
    </div>
    <script>
    var cd = document.getElementById("p_2").children; //获取所有的有效元素子节点，全局变量
    //给所有的文本节点增加一段话
    function appendStr(){
    for(var i = 0; i < cd.length; i++){
    //获取每个元素子节点的第一个子节点，这里是文本节点
    var tmp = cd[i].firstChild;
    tmp.appendData("给文本节点中附加一小段话~");
    }
    }
    //从文本节点第一个字符开始插入
    function insertStr(){
    for(var i = 0; i < cd.length; i++){
    //拿到每个元素子节点的第一个子节点，这里是文本节点
    var tmp = cd[i].firstChild;
    tmp.insertData(0, "从第一个字符插入文本");
    }
    }
    //删除[0, 2)区间的字符文本
    function deleteStr(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    tmp.deleteData(0, 2);
    }
    }
    //[0,2)区间用replace字符串代替
    function replaceStr(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    tmp.replaceData(0, 2, "replace");
    }
    }
    //把文本节点从中间切割成两部分
    function split(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    //保留后面的部分
    var objs=tmp.splitText(tmp.data.length/2).data;
    alert(objs);//大海
    alert(tmp.data);//面朝
    debugger;
    }
    }
    //截取文本节点的[0, 2)区间字符
    function subString(){
    for(var i = 0; i < cd.length; i++){
    var tmp = cd[i].firstChild;
    tmp.data = tmp.substringData(0,2);
    //tmp.replaceData(0,tmp.length,tmp.substringData(0,2));
    }
    }
    </script>
    </body>
    </html>

学生练习：

1）动态添加多行，并奇偶变色
2）请使用Javascript代码补全doSomething ()方法，实现文本框输入内容，div根据输入内容调整的功能。
要求：
（1）当输入的内容是red，blue或black时，对应更改div中的字体颜色。
（2）当输入的内容是算数表达式时(如：2+3*5)，在div中显示计算结果。
（3）当输入的内容是文字时，在div中显示这些文字。
<input type="text" id="input">
<input type="button" value="输入" onClick="doSomething();">
<div id="output">welcome</div>

最后编辑于：2020.02.27 11:24:32

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,816评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,729评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,300评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,780评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,890评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,084评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,151评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,912评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,355评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,666评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,809评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,504评论 4赞 334
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,150评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,882评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,121评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,628评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,724评论 2赞 351

第4章 操作DOM

目标