javaScript的DOM（一）

最新推荐文章于 2022-11-15 23:21:14 发布
最新推荐文章于 2022-11-15 23:21:14 发布
阅读量213 收藏
点赞数
分类专栏： IT 文章标签： DOM 元素 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bwf_erg/article/details/53195701
版权

DOM是DocumentObject Model的缩写，简称文档对象模型,，先来看一下DOM树结构图：





通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

访问HTML元素节点常用的有3种方式

1.通过 id 访问 HTML 元素

document.getElementById

2.通过标签名访问HTML 元素

document.getElementsByTagName

3.通过类名访问HTML 元素

document.getElementsByClassName

<head>

       <title></title>

       <p id="demo"class="hello">你好</p>

       <p id="test">世界</p>

       <scripttype="text/javascript">

       //id

       varp1=document.getElementById("demo");

       console.log(p1);

       var res1=p1.innerHTML;

       console.log(res1);

       //标签名

       varp2=document.getElementsByTagName("p");

       console.log(p2);

       var res2=p2[1].innerHTML;

       console.log(res2);

       //类名

       varp3=document.getElementsByClassName("hello");

       var res3=p3[0].innerHTML;

       console.log(res3);

      

      

</script>

</head>

此外用className选择元素.实现有2步

1.选出所有元素

2.通过className条件筛选

示例：将class="box"的li的背景颜色变为红色

<scripttype="text/javascript">

window.οnlοad=function()

{

       var oUl=document.getElementById('ul1');

       var aLi=oUl.getElementsByTagName('li');

       var i=0;

      

       for(i=0;i<aLi.length;i++)

       {

              if(aLi[i].className=='box')

              {

                     aLi[i].style.background='red';

              }

       }

}

</script>

</head>

<body>

<ulid="ul1">

       <li></li>

       <li></li>

       <li></li>

       <liclass="box"></li>

       <li></li>

       <liclass="box"></li>

       <liclass="box"></li>

       <li></li>

       <li></li>

       <li></li>

</ul>

</body>

运行结果：



封装成函数

<scripttype="text/javascript">

functiongetByClass(oParent, sClass)

{

       varaEle=oParent.getElementsByTagName('*');

       var aResult=[];

       var i=0;

      

       for(i=0;i<aEle.length;i++)

       {

              if(aEle[i].className==sClass)

              {

                     aResult.push(aEle[i]);

              }

       }

      

       return aResult;

}

 

window.οnlοad=function()

{

       var oUl=document.getElementById('ul1');

       var aBox=getByClass(oUl, 'box');

       var i=0;

      

       for(i=0;i<aBox.length;i++)

       {

              aBox[i].style.background='yellow';

       }

}

</script>

实现效果和之前的效果是一致的

通过dom操作 改变HTML内容

1.改变 HTML输出流

document.write("hello");

2.改变 HTML内容

document.getElementById("demo").innerHTML="51code";

3.改变HTML样式

document.getElementById("test").style.background="red";

 


bwf_erg
关注
专栏目录
JavaScript中 DOM 的概念解释
norang的博客
06-04 1889
3.1 文档：DOM中的“D” 如果没有document （文档），DOM也就无从谈起。当创建了一个网页 并把它加载到Web浏览器中时，DOM就在幕后悄然而生。它把你编写 的网页文档转换为一个文档对象。 在人类语言中，“对象”这个词的含义往往不那么明确，它几乎可以用来 称呼任何一种东西。但在程序设计语言中，“对象”这个词的含义非常明 确。 3.2 对象：DOM中的“O” 在上一章的末尾，我们向大家展示了几个JavaScript对象的例子。你应该 还记得，“对象”是一种自足的数据集合。与某个特定对象相关联的变
JavaScript之DOM
qq_43751200的博客
06-05 1781
DOM
JavaScript DOM操作
好好学习天天向上
03-27 5196
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript DOM详解
Chiclaim
10-03 7453
DOM的获取Element的方法和属性： getElementById(id) getElementsByTagName(tag) getElementsByClassName(class) parentNode childNodes firstChild lastChild nextSibling
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript DOM基础
程序员柒的博客
07-18 2197
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
JavaScript——DOM
super码力的博客
12-15 3077
文档对象模型（简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式...
JavaScript删除DOM
weixin_56550293的博客
12-16 4998
删除一个DOM节点就比插入要容易很多 要删除一个节点秒首先要获取该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉 //获取自身节点 var self=document.getElementById('id'); //获取自身节点的父节点 var parent=self.parentElement; //删除节点 parent.removeChild(self); 注意：删除后的节点虽然已经不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置 当你遍..
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 1927
整一些可以练着玩的熟悉语法的DOM小例子
JavaScript中的DOM对象
qq_44971635的博客
03-23 2520
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip
06-17
JavaScript DOM编程艺术(第2版)是一本深受开发者欢迎的书籍，主要涵盖了JavaScript语言在Web前端开发中的应用，特别是关于DOM（Document Object Model）的深入理解和实践。这本书的随书光盘包含了源代码和PDF电子版...
JavaScript dom操作 dom元素查询 示例代码
最新发布
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
JavaScript DOM编程艺术源代码
10-06
【JavaScript DOM编程艺术】是一本深受开发者欢迎的书籍，它主要介绍了如何使用JavaScript语言来操作和改变网页的Document Object Model（DOM）。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式来访问和修改...
JavaScript DOM编程艺术(第2版pdf)+源代码
02-26
JavaScript DOM编程艺术(第2版)是一本深受程序员喜爱的JavaScript技术书籍，专注于讲解如何使用JavaScript与Document Object Model（DOM）进行交互。DOM是Web页面的结构化表示，它允许我们通过编程方式操纵HTML和XML...
Char类型的运算
bwf_erg的博客
06-19 3783
[面试原题] 假设y是字符类型，初始化值为‘b’，那么以下语句输出的结果是什么？ A.  System.out.println(++y); B.   System.out.println(y+1); [正确答案]       A.‘c’       B.  99 [面试技术点] 字符在java中的运算。 [解读A]       char在java中称为“字符型”，占2个字节。字
文字排版中的设计四原则（一）
bwf_erg的博客
11-11 3576
四项基本设计原理，对比、重复、对齐、亲密性被设计师广泛应用。它们在网页设计中对文字的排版也经常用到。   1.对比   我们将对比分为三类，有标题和正文中的字体、字号对比，文字颜色的对比，以及文字颜色与背景颜色的对比。   标题与正文的对比   在下面网站案例页面中，标题使用18px的微软雅黑，正文使用12px的宋体，两种字体和字号的对比让文字内容富有层次，能吸引读者眼球。
用Markdown来编写HTML5代码
bwf_erg的博客
11-09 3261
一直使用Markdown语言来编写工作中的文档，但是其Markdown很多的功能我很少使用到，今天学习html5突发奇想，Markdown支持html5新增的标签吗？果然，很多标签都支持，而且效果很好，为了能更好的使用Markdown在这里归纳下： 字体变小: content content 展示效果： content1content2 使用打印字
Java笔试题解-枚举类型（1）
bwf_erg的博客
06-26 2059
1： A.       枚举类型的取值默认为publicstatic final B.       枚举类型中可以定义属性和方法 C.       构造器必须私有 D.       枚举类型不可实现其他接口   答案:A,B,C 解析: 本题考查枚举类型的定义和使用。枚举类型可以实现接口，D选项是错误的。 2： A.       public enumC
JavaScript DOM编程艺术探索
DOM将网页内容视为一棵树形结构，每个元素、属性和文本都成为树中的节点，使得开发者可以通过JavaScript操作这些节点，实现对网页内容的动态修改、添加或删除。 JavaScript与DOM的结合，使得网页设计人员可以实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值