javascriptDOM

最新推荐文章于 2024-09-18 15:54:57 发布
最新推荐文章于 2024-09-18 15:54:57 发布
阅读量211 收藏
点赞数
文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csdn_wpno1/article/details/77073416
版权

DOM

1.1DOM概念

       DOM（Document ObjectModel）：文档对象模型

       通过开发者工具的Elements标签页可以查看

通过开发者工具sources标签页的watch窗口也可以查看

整个文档是由一系列节点对象组成的一棵树。

节点（node）包括元素节点（1）、属性节点（2）和文本节点（3）

    var th1= document.getElementById("th1");

   alert(th1.nodeType);

   alert(th1.nodeName);

   alert(th1.nodeValue);

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

var attr1 =th1.getAttributeNode("name");

   alert(attr1.nodeType);

   alert(attr1.nodeName);

   alert(attr1.nodeValue);

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

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

1.2获取元素

（1）getElementById

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

（2）getElementsByTagName

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

（3）getElementsByClassName

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

（4）getElementsByName

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

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

document对象支持以上四种，而element对象仅支持getElementsByTagName和getElementsByClassName。

1.3修改元素

       （1）修改内容

         functionfun(){

        //获取指定元素

        varp1 = document.getElementById("p1");

       p1.innerText = "我被单击了";

}

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

function fun(){

        //获取指定元素

        varp1 = document.getElementById("p1");

       p1.innerHTML = "我被单击了<br>换行了";

}

也可以通过innerHTML属性获取或设置内部文本。

两者的区别：innerHTML会按照HTML规则解析文本，而innerText只是当做普通文本内容。

（1）修改样式

a.  xxx.style.yy

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

<style type="text/css">

       .style1{

           color:red;

           font-size:20px;

           text-decoration: underline;

        }

       .style2{

           color:blue;

           font-size:32px;

           text-decoration: line-through;

        }

   </style>

<body>

    <pid="p1">修改样式测试</p>

   <input type="button" value="样式一"οnclick="style1()"/>

   <input type="button" value="样式二"οnclick="style2()"/>

</body>

<script>

    var p1 =document.getElementById("p1");

    functionstyle1(){

       p1.className = "style1"

    }

    functionstyle2(){

       p1.className = "style2"

    }

</script>

1.4增加/删除元素

        （1）createElement创建一个元素

         createElement(”p”)，创建一个段落

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

       createTextNode(”文本内容”)，创建一个值为“文本内容”的文本节点

       （3）appendChild添加子节点

       （4）removeChild删除子节点


       动态添加

<body>

    <divid="div1"></div>

   <input type="button" value="添加段落"οnclick="addPara()"/>

</body>

<script>

    varindex = 1;

    functionaddPara(){

        //创建一个段落标签

        varp = document.createElement("p");

        //创建文本节点

        varcontent = "第"+index+"段落";

        vartxt = document.createTextNode(content);

        //将文本节点添加到段落

       p.appendChild(txt);

        //将段落添加到div中

        vardiv1 = document.getElementById("div1");

       div1.appendChild(p);

       index++;

    }

</script>

动态删除

<body>

    <divid="div1">

       <p id="p1">第1段落</p>

       <p id="p2">第2段落</p>

       <p id="p3">第3段落</p>

       <p id="p4">第4段落</p>

   </div>

   <input type="button" value="删除第二段"οnclick="removePara()"/>

</body>

<script>

    varindex = 1;

    functionremovePara(){

       //先找到父节点

        vardiv1 = document.getElementById("div1");

        //再找到要删除的节点

        varp2 = document.getElementById("p2");

        //将要删除的节点从父节点中移除

       div1.removeChild(p2);

    }

</script>

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

那么如果并不知道父节点是谁，该如何删除呢？

p2.parentNode.removeChild(p2);

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

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

function delPara(){

        vardiv1 = document.getElementById("div1");

        varparas = div1.getElementsByTagName("p");

       for(var i in paras){

           if((i+1)%2 == 1){

               div1.removeChild(paras[i]);

           }

        }

    }

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

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

<body>

    <divid="div1"></div>

   <input type="button" value="添加段落"οnclick="addPara()"/>

   <input type="button" value="删除奇数段落"οnclick="delPara()"/>

</body>

<script>

    varindex = 1;

    functionaddPara(){

        //创建一个段落标签

        varp = document.createElement("p");

        //创建文本节点

        varcontent = "第"+index+"段落";

        vartxt = document.createTextNode(content);

        //将文本节点添加到段落

       p.appendChild(txt);

        //设置属性

       if((index%2) == 1) {

           p.setAttribute("class","odd");

        }

        //将段落添加到div中

        vardiv1 = document.getElementById("div1");

       div1.appendChild(p);

       index++;

    }

    functiondelPara(){

        vardiv1 = document.getElementById("div1");

        varparas = div1.getElementsByClassName("odd");

       for(var i=paras.length-1; i>=0; i--){

           div1.removeChild(paras[i]);

        }

    }

</script>

1.5导航

document是根节点

parentNode：获取父节点

childNodes：获取所有子节点

firstChild：第一个子节点

lastChild：获取最后一个子节点

previousSibling：该元素紧接之前元素

nextSibling：该元素紧接下一个元素

<body>

    <divname="第一章">

       <p id="p1">第一段<span>第一句</span><span>第二句</span></p>

   </div>

   <input type="button" value="获取p1父节点的name属性"οnclick="fun1()"/>

   <input type="button" value="显示p1子节点的个数"οnclick="fun2()"/>

   <input type="button" value="显示p1第一个子节点的节点类型"οnclick="fun3()"/>

   <input type="button" value="显示p1最后一个子节点的节点类型"οnclick="fun4()"/>

</body>

<script>

    var p1 =document.getElementById("p1");

    functionfun1(){

        varvalue = p1.parentNode.getAttribute("name");

       alert(value);//第一章

    }

    functionfun2(){

        varchilds = p1.childNodes;

       alert(childs.length);//3

    }

    functionfun3(){

        varchild1 = p1.firstChild;

       alert(child1.nodeType);//3（文本节点）

    }

    functionfun4(){

        varlastChild = p1.lastChild;

       alert(lastChild.nodeType);//1（元素节点）

    }

</script>

csdn_wpno1
关注
JavaScript DOM操作
好好学习天天向上
03-27 5179
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript DOM 对象详解
xycxycooo的博客
07-16 893
在 JavaScript 编程中，DOM（Document Object Model）是指文档对象模型，它提供了一组用于与 HTML 文档进行交互的对象。DOM 是一种跨平台的、独立于语言的接口，它将 HTML 或 XML 文档表示为一个树形结构，其中每个节点都是一个对象，代表文档的一部分（如元素、属性、文本等）。通过 DOM，开发者可以添加、删除、修改和查询文档中的元素和内容。通过本文的详细讲解，相信你已经对 JavaScript 中的 DOM 对象有了全面的了解。方法可以通过元素的标签名获取元素集合。
JavaScript DOM详解
Chiclaim
10-03 7445
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
JavaScript DOM基础
程序员柒的博客
07-18 2186
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
JavaScript之DOM
qq_43751200的博客
06-05 1776
DOM
JavaScript DOM操作(超详细)
wu_ry的博客
03-14 2571
在JavaScript中，"-"表示减号，如果样式属性名称中带有"-"号，则要省去"-",并且"-"后的首字母要大写，因此font-size对应的style对象的属性名称应为fontSize.微软公司为每个元素提供了一个currentStyle对象，它包含了所有元素的style对象的特性和任何未被覆盖的CSS规则的style特性，currentStyle对象与style对象的使用方式一样，语法格式如下所示。使用style属性和className属性设置元素的样式，想要获取某个元素的属性值，应该如何实现呢？
JavaScript DOM事件的简单绑定onclick
七七的博客
04-17 2436
DOM： 功能: 控制html文档的内容 获取页面标签(元素)对象: Element document.getElementById(" id值") :通过元素的id获取元素对象 操作Element对象: 修改属性值: 首先明确获取的对象是哪一个? 查看API文档，找其中有哪些属性可以设置 <body> <img id="imggg" src="../...
JavaScript DOM 向文档添加新的元素
bcbobo21cn的专栏
03-02 824
使用document.createElement创建新元素，使用appendChild()添加；
JavaScript DOM流
a1462860631的博客
11-10 560
JavaScript DOM流学习状况一
JavaScript DOM编程艺术简略笔记
小賀のBlog
03-28 849
JavaScript DOM编程艺术一书的简略重点笔记
随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
JavaScript DOM编程艺术(第2版pdf)+源代码
02-26
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
JavaScript DOM编程艺术源代码
10-06
【JavaScript DOM编程艺术】是一本深受开发者欢迎的书籍，它主要介绍了如何使用JavaScript语言来操作和改变网页的Document Object Model（DOM）。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式来访问和修改...
JavaScript DOM编程艺术【第2版&高清】.pdf
10-26
但是，根据标题《JavaScript DOM编程艺术【第2版&高清】.pdf》和描述“JavaScript DOM编程艺术，高清资源，无比经典，值得拥有”，我们可以推断这本书主要讲述了JavaScript中DOM（文档对象模型）的相关编程技术。...
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 677
【代码】【JavaScript】LeetCode：707设计链表。
RedisTemplate混用带来的序列化问题
最新发布
咖啡煮码
09-18 431
RedisTemplate 不要乱用哦，否则极易出现序列化问题
JS的输出语句
J3259392566的博客
09-13 309
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 667
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
JavaScript DOM 高级编程指南
"JavaScript DOM 高级程序设计（加）桑贝斯" JavaScript DOM（Document Object Model）高级程序设计是Web开发中的重要主题，它涉及到如何使用JavaScript与网页的结构进行交互，包括创建、修改和操作HTML和XML文档的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值