DOM

最新推荐文章于 2021-06-10 15:03:32 发布
最新推荐文章于 2021-06-10 15:03:32 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： JS 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a126789/article/details/77115941
版权

DOM

1、DOM概念

DOM（Document Object Modele）文档对象模型

使用一个案例来展示：班级名册 
<body>
    <table>
        <caption>H5-17-03班级名册</caption>
        <thead>
            <tr>
               <th>姓名</th>
                <th id="th1" name="sex">性别</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小花</td>
                <td>女</td>
                <td>12345678912</td>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>12314238912</td>
            </tr>
            <tr>
                <td>玲玲</td>
                <td>女</td>
                <td>12378965912</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    var th1 = document.getElementById("th1");
    /*alert(th1.nodeType);
    alert(th1.nodeName);
    alert(th1.nodeValue);*/
    /*var attr1 = th1.getAttributeNode("name");
    alert(attr1.nodeType);
    alert(attr1.nodeName);
    alert(attr1.nodeValue);*/
    var txt1 = th1.firstChild;
    alert(txt1.nodeType);
    alert(txt1.nodeName);
    alert(txt1.nodeValue);
</script>

在这里程序运行之后，通过开发者工具的Elements变迁也可以查看到，整个文档是有一系列节点对象组成的一棵树。

节点（Node）：（1）元素节点（用1表示）；（2）属性节点（用2表示）；（3）文本节点（用3表示）

（1）案例：元素节点

<script>
    var th1 = document.getElementById("th1");
    alert(th1.nodeType);
    alert(th1.nodeName);
    alert(th1.nodeValue);
</script>


th1代表一个元素节点（nodeType=1），nodeType就是标签名（th），元素节点nodeType= null。

（2）案例：属性节点

<script>
    var th1 = document.getElementById("th1");
    var attr1 = th1.getAttributeNode("name");
    alert(attr1.nodeType);
    alert(attr1.nodeName);
    alert(attr1.nodeValue); 
</script>


getArribleNode方法是获取元素的属性节点，此时输出的节点类型为属性节点（2），节点名称就是属性名（name），节点值就是属性值（sex）。

（3）案例：文本节点

<script>
    var th1 = document.getElementById("th1");
    var txt1 = th1.firstChild;
    alert(txt1.nodeType);
    alert(txt1.nodeName);
    alert(txt1.nodeValue);
</script>


txt1是一个文本节点（3），节点名称固定就是#text，节点值就是文本内容（性别）。

2、获取元素

（1）getElementById

根据元素的id属性来获取元素，并获取到的是一个元素

案例：段落的形式

<body>
    <p>第一段</p>
    <p>第二段</p>
    <p id="p3">第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p>第六段</p>
    <input type="button" οnclick="fun1()" value="第三段字体设置为32px";>
</body>
<script>
    function fun1(){
        var p3 = document.getElementById("p3");
        p3.style.fontSize = "32px";
    }
</script>


（2）getElementsByTagName

根据标签民来获取元素，结果是一个元素集合

案例：

<body>
    <p>第一段</p>
    <p>第二段</p>
    <p id="p3">第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p>第六段</p>
    <input type="button" οnclick="fun2()" value="所有段落设置为红色"/>
</body>
<script>
    function fun2(){
        var paras = document.getElementsByTagName("p");
        for(var i in paras){
            paras[i].style.color = "red";
        }
    }
</script>


（3）getElementByClassName

根据class属性来获取元素，结果是一个元素集合。

（4）getElementsByName

根据name属性来获取元素，结果是一个元素集合。

总结：获取元素可以根据标签名获取，也可以根据id、name、class属性获取。根据id属性获取的结果是一个元素，而其他属性获取的是一个元素集合。

document对象支持以上四种方法，而element对象仅支持getElementsByTagName和getElementByClassName

3、修改元素

（1）修改内容

例子：

function fun(){
    //获取到指定元素
    var p1 = document.getElementById("p1");
    p1.innerText = "我被单击了！<br>换行了";
}//结果是：我被单击了！<br>换行了


通过innerText属性可读取或设置标签的内部文本。 


function fun(){
    //获取到指定元素
    var p1 = document.getElementById("p1");
    p1.innerHTML = "我被单击了！<br>换行了";
}//结果为：我被单击了!
	   换行了
也可以通过innerHTML属性获取内部文本。
这两者的区别就是：innerHTML会按照html规则去解析文本，而innerText只是做普通文本。

（2）修改样式

a、xxx.style.yyy

b、xxx.classname="……"（相当于修改了class属性）

例子：

<style>
        .style1{
            color: red;
            font-size: 16px;
            text-decoration: underline;
        }
        .style2{
            color: blue;
            font-size: 32px;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <p id="p1">修改样式测试</p>
    <input type="button" value="样式一" οnclick="style1()"/>
    <input type="button" value="样式二" οnclick="style2()"/>
</body>
<script>
    var p1 = document.getElementById("p1");
    function style1(){
        p1.className = "style1";
    }
    function style2(){
        p1.className = "style2";
    }
</script>


4、添加删除元素

添加：

（1）createElement创建一个元素节点

比如：createElement("p")创建一个段落

（2）createTextNode()创建一个文本节点

比如：createTextNode("文本内容")创建一个值为“文本内筒”的文本节点

（3）appendChild添加子节点

例子：

<body>
    <div id="div1">

    </div>
    <input type="button" value="添加段落" οnclick="add()"/>
</body>
<script>
    var index = 1;
    function add(){
        //创建一个段落标签
        var p = document.createElement("p");
        //创建一个(变化的)文本节点
        var content = "第"+index+"段落";
        var txt = document.createTextNode(content);
        //把创建的文本节点添加到段落
        p.appendChild(txt);
        //将段落添加到div中
        var div1 = document.getElementById("div1");
        div1.appendChild(p);
        index++;
    }
</script>

删除：

（4）removeChild删除子节点

例子：删除段落，第一种方法

<body>
    <div id="div1">
        <p id="p1">第1段</p>
        <p id="p2">第2段</p>
        <p id="p3">第3段</p>
        <p id="p4">第4段</p>
        <p id="p5">第5段</p>
    </div>
    <input type="button" value="删除第二段" οnclick="del()"/>
</body>
<script>
    //var index = 1;
    function del(){
        //先找到父节点
        var div1 = document.getElementById("div1");
        //在找到要删除的节点
        var p2 = document.getElementById("p2");
        //将要删除的节点从父节点中移除
        div1.removeChild(p2);
    }
</script>


这种方法是分别找到父节点和要删除的节点，然后执行删除操作，该方法的一个前提是知道父节点是谁。

那么如果不知道父节点是谁，那么该如何删除呢？第二种方法：

<body>
    <div id="div1">
        <p id="p1">第1段</p>
        <p id="p2">第2段</p>
        <p id="p3">第3段</p>
        <p id="p4">第4段</p>
        <p id="p5">第5段</p>
    </div>
    <input type="button" value="删除第二段" οnclick="del()"/>
</body>
<script>
    function del(){
        //在找到要删除的节点
        var p2 = document.getElementById("p2");
        p2.parentNode.removeChild(p2);
    }


这个方法不需要知道父节点是谁，用parentNode的方法可以找到它的父节点，可以直接进行删除。

（5）动态添加和动态删除

案例：删除动态添加的奇数段落

思路1：获取div1下的所有段落，遍历所有段落，将序号为奇数的段落删除

function del(){
    var div1 = document.getElementById("div1");
    var paras = div1.getElementsByTagName("p");
    for(var i in paras){
        if((i+1)%2 == 1){
            div1.removeChild(paras[i]);
        }
    }
}


这种方法在初始时是可以的，但是随着动态添加或删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶性，所以出现误判。

思路2：添加时通过设置class属性，然后通过getElementsByClassName来获取奇数段落。

<body>
<input type="button" value="添加段落" οnclick="add()"/>
<input type="button" value="删除奇数行" οnclick="del()"/>
    <div id="div1">

    </div>
</body>
<script>
    var index = 1;
    function add(){
        //创建一个段落标签
        var p = document.createElement("p");
        //创建一个(变化的)文本节点
        var content = "第"+index+"段落";
        var txt = document.createTextNode(content);
        //把创建的文本节点添加到段落
        p.appendChild(txt);
        if(index%2 == 1){
            p.setAttribute("class","odd");
        }
        //将段落添加到div中
        var div1 = document.getElementById("div1");
        div1.appendChild(p);
        index++;
    }
    function del(){
        var div1 = document.getElementById("div1");
        var paras = div1.getElementsByClassName("odd");
        for(var i=paras.length-1; i>=0; i--){
            div1.removeChild(paras[i]);
        }
    }
</script>


5、导航

document是根节点

parentNode：获取父节点

childNodes：获取所有子节点

firstChild：获取第一个子节点

lastChild：获取最后一个子节点

例子：

<body>
    <div name="第一章">
        <p id="p1">第一段<span>第一句</span><span>第二句</span></p>
    </div>
    <input type="button" value="获取p1父节点的name属性" οnclick="fun1()"/>
    <input type="button" value="显示p1子节点的个数" οnclick="fun2()"/>
    <br><br>
    <input type="button" value="显示p1第一个子节点的节点类型" οnclick="fun3()"/>
    <input type="button" value="显示p1最后一个子节点的节点类型" οnclick="fun4()"/>
</body>
<script>
    var p1 = document.getElementById("p1");
    function fun1(){
        var value = p1.parentNode.getAttribute("name");
        alert(value);
    }
    function fun2(){
        var childs = p1.childNodes;
        alert(childs.length);
    }
    function fun3(){
        alert(p1.firstChild.nodeType);
    }
    function fun4(){
        alert(p1.lastChild.nodeType);
    }
</script>



文洛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
虚拟DOM
小王的博客
08-24 1448
虚拟DOM相关知识
DOM介绍
weixin_45116146的博客
09-23 2613
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。 DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。 DOM可以理解成网页的编程接口。 1.节点 DOM最小的单位叫做节点。文档的树形结构（DOM树），就是各种不同类型的节点组成的。 节点类型有七种：Document、DocumentTyp..
DOM详解
m0_48224507的博客
06-10 4538
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
Dom
03-09
**DOM（Document Object Model）详解** DOM，全称为文档对象模型（Document Object Model），是W3C组织制定的一种标准，它提供了一种结构化的表示XML或HTML文档的方式，并且允许程序和脚本动态地访问和更新文档的...
dom
02-24
DOM，全称为“Document Object Model”，中文译为“文档对象模型”，是Web开发中的一个核心概念，尤其是在JavaScript中。它是一种标准，定义了如何表示HTML或XML文档，并提供了与这些文档交互的API（应用程序编程...
JS选择结构（if嵌套、switch语句）
热门推荐
huxixi的博客
07-28 1万+
JS选择结构 今天学习了JS选择结构的另两个知识点，if嵌套和switch语句。下面就这两个知识点，来一起了解下。 今天主要以案例为主，主要写了几个案例可供参考。 1、if语句嵌套 案例1 四则运算，利用if嵌套来完成 var ch = prompt("请输入运算符："); var a = Number(prompt("请输入第一个数：")); var b = Number(p
BOM
huxixi的博客
08-12 4103
BOM 概念：BOM（browser object model）窗口对象模型 1、常用对象 window：窗口，浏览器的窗口 我们定义的全局变量和全局函授都是window对象的属性和方法 例子： var a = 1; function test(){ var a = 2; alert(a); alert(window.a); } 全局变量是windo
JS常用算法
huxixi的博客
08-08 2953
常用算法 1、累加/累积 一般形式： 累加：v += e 累积：v *= e （v代表累加和/累积，e代表累加/累积项） 累加：将一系列的数据加到一个变量里面。最后得到累加的结果。 比如：将1到100的数求累加和。 var sum = 0; for(var i=1; i<=100; i++){ sum +=i; } alert(sum);//结果为：5050 累
事件
huxixi的博客
08-08 2775
事件 1、鼠标常用事件 （1）单击事件（click） 案例： function fun(){ //获取到指定元素 var p1 = document.getElementById("p1"); p1.innerText = "我被单击了！"; p1.style.fontSize = "54px"; }
JavaScript的程序设计思维与选择结构
huxixi的博客
07-26 1838
今天主要学习了JS中的程序设计思维，跟平常的生活思维不一样，你要运用计算机的思维去看待问题，那这就考验你的思维能力了，今天老师说的最多的就是思路是最重要的，确实是。因为人类使用的是自然语言（先称为自然语言吧），而计算机使用的是机器语言，思考的自然不一样。那么现在就来说说程序的设计思维吧。 1、程序：就是解决生活中问题的步骤（流程）描述。 计算机中是程序：解决问题的步骤描述，但用的是计算机语
JavaScript的程序设计基础
huxixi的博客
07-25 1777
今天主要讲解了JS程序设计基础相关是一些知识。先说一下其中的几个吧。其中有：数据类型、变量、对象类型和各种运算符的表达式。现在就系统的写一下。 2.1 数据类型（也可称为常规数据类型与变量） 其实计算机程序就是处理现实中的各种数据。包括三种类型：字符串（string）、数值（number）和布尔类型（boolean）；还包括了警告提示框（打印）alert()，数据的类型typef()。 但是
JS错误与调试
huxixi的博客
07-29 1766
一、错误与调试 1、错误的概念与处理 计算机程序的错误有两种：语法错误和逻辑错误。 ①语法错误：比如，alert拼写错误，写成了alter。 var a = 3 + 4; alert(a); alter(a); a++; alert(a); 上面的例子的运行结果只显示了7，后面的结果没有显示，说明后面的代码没有运行。因为在输出7之后遇到了
JS循环辅助语句
huxixi的博客
08-01 1760
今天主要就几天前写的JS循环结构的一些补充。主要是JS循环辅助语句和循环的嵌套。今天还是主要案例为主，其中有些理论知识，希望能帮助你。 1、循环辅助语句 break：跳出所在的switch或者循环结构 案例1 素数 思路：素数：对于自然数，如果它只有1和本身之外在没有其他因子 1、提示并接受判断的数n的输入  2、在[2，n-1]之间去寻找因子  3、如果找到则设置找到标志，并提前结
其他对象
huxixi的博客
08-05 1673
其他对象 1、Math对象 （1）Math.max(n1,n2,n3,n4)：取得n1,n2,n3,n4中的最大值 （2）Math.min(n1,n2,n3,n4)：取得n1,n2,n3,n4中的最小值 （3）Math.PI：获得π的值 var pi = Math.PI; alert(pi); （4）Math.E：获取e的值 var e = Math.E; alert(e);
JavaScript的基础知识
huxixi的博客
07-25 1667
从这一星期开始，我们将要开始对JavaScript的学习，那现在我想就JavaScript的基础知识来进行一些总结。其中包括理论知识和代码的展示，希望会对你们有所帮助。 1、JS基础知识 1.1 基本概念 我先问一个问题你：就是为什么需要有JavaScript呢？JavaScript有什么作用呢？ 那就先来说说HTML和CSS用来做一个对比，首先HTML是负责呈现具体的内容；而CS
python DOM
最新发布
09-29
在Python中，可以使用xml.dom模块进行DOM解析和操作。例如，可以使用以下代码解析一个XML文件并获取其中的元素内容： ``` from xml.dom import minidom # 解析XML文件 dom = minidom.parse('config.xml') # 获取...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值