JavaScript_8(DOM对象)

最新推荐文章于 2022-08-29 21:07:38 发布
最新推荐文章于 2022-08-29 21:07:38 发布
阅读量179 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45872868/article/details/109897205
版权

1.DOM对象

  • DOM–Document Object Model[文档对象模型]
    当网页被加载时，浏览器会创建页面的文档对象模型。
    HTML DOM 模型被构造为对象的树
    在这里插入图片描述
Html文件
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=””>My link</a>
<h1>My header</h1>
</body>
</html>

2.DOM可以完成的功能

  • Javascript能够改变页面中所有HTML元素
  • Javascript能够改变页面中所有HTML属性
  • Javascript能够改变页面中所有CSS样式
  • Javascript能够对页面中所有事件作出反应

3. 查找HTML元素
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过getElementById(id属性值)通过id查找HTML元素
    例如：
    注意：当id属性相同时，只能获取到第一个id
 <script>
      //getElementById(id属性值);通过 id 查找 HTML 元素
      function testByID() {
        var p1 = document.getElementById("p1");
        //p1--[object HTMLParagraphElement];  DOM对象
        p1.style.fontSize = "50px";
        var p2 = document.getElementById("p2");
        //p2--[object HTMLParagraphElement] DOM对象
        p2.style.color = "red";
        //当id属性值相同时,只能得到第一个元素
        var p3 = document.getElementById("p3");
        //p3---[object HTMLParagraphElement] DOM对象
        p3.style.fontSize = "50px";
        p3.style.color = "red";
      }
    </script>
  </head>

  <body>
    <p id="p1">p元素测试getElementById(id属性值)</p>
    <p id="p2">p元素测试getElementById(id属性值)</p>
    <p id="p3">p元素测试getElementById(id属性值)</p>
    <p id="p3">p元素测试getElementById(id属性值)</p>
    <input type="button" value="测试getElementById(id属性值)" οnclick="testByID();">
  </body>

在这里插入图片描述

  • getElementsByTagName(标签名) 通过标签名查找HTML元素

    注意：该方法或获取到所有相同标签的HTML元素

    无论获取的元素标签有几个，都会得到一个DOM对象的集合（数组），除非只获取该数组中的其中一个，才得到该DOM对象的一个元素

    例如：
    （1）获取多个元素情况

 function GetElementsTagByName() {
        var p = document.getElementsByTagName("p");
        alert(p)
      }
    </script>

    <p>p元素测试document.getElementsTagByName(标签名)</p>
    <p>p元素测试document.getElementsTagByName(标签名)</p>
    <p>p元素测试document.getElementsTagByName(标签名)</p>
    <p>p元素测试document.getElementsTagByName(标签名)</p>
    <input type="button" value="p元素测试document.getElementsTagByName(标签名)" οnclick="GetElementsTagByName();">

在这里插入图片描述

（2）获取一个元素情况

 function GetElementsTagByName() {
        var p = document.getElementsByTagName("p");
        alert(p)
      }
    </script>
    <p>p元素测试document.getElementsTagByName(标签名)</p>
    <input type="button" value="p元素测试document.getElementsTagByName(标签名)" οnclick="GetElementsTagByName();">

在这里插入图片描述

（3）只获取该数组中的其中一个，才得到该DOM对象的一个元素

 function GetElementsTagByName() {
        var p = document.getElementsByTagName("p")[0];
        alert(p)
      }

在这里插入图片描述

  • getElementsByClassName(class属性值)通过类名找到 HTML 元素

    注意：getElementsByClassName(class属性值)获取HTML元素注意点和上面标签名查找方法一致

    例如：

function testByClassName() {
        var p1 = document.getElementsByClassName("p1");
        var h1 = document.getElementsByClassName("h1");
        //alert(p1); //[object HTMLCollection]
        for (var i = 0; i < p1.length; i++) {
          p1[i].style.color = "red";
        }
        var h1 = document.getElementsByClassName("h1");
        //alert(h); //[object HTMLCollection]
        for (var i = 0; i < h1.length; i++) {
          h1[i].style.color = "blue";
        }
      }
    </script>

    <p class="p1">p元素测试document.getElementsByClassName(标签名)</p>
    <p class="p1">p元素测试document.getElementsByClassName(标签名)</p>
    <p class="p1">p元素测试document.getElementsByClassName(标签名)</p>
    <p class="p1">p元素测试document.getElementsByClassName(标签名)</p>

    <h1 class="h1">h元素测试document.getElementsByClassName</h1>
    <h1 class="h1">h元素测试document.getElementsByClassName</h1>
    <h1 class="h1">h元素测试document.getElementsByClassName</h1>


    <input type="button" value="p元素测试document.getElementsTagByName(标签名)" οnclick="testByClassName();">

在这里插入图片描述

4.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]

  • innerHTML 属性–改变页面中HTML 元素的文本内容

注意：被innerHTML所修改的内容中出现HTML标签的话，这个标签或被解释运行，所以一般最好不要出现HTML标签

例如:

 function testinnerHTML() {
        var text1 = document.getElementById("text1");
        var h1 = document.getElementsByTagName("h1")[0];
        //h1--[object HTMLHeadingElement]  Dom对象
        var textvalue = text1.value;
        h1.innerHTML = textvalue;
        //h1.innerHTML=text1.value;
        //h1.innerHTML=document.getElementById("text1").value;
        //注意:innerHTML中设置的字符串内容中有html标记，那么这个被包含的html标记会被解释运行。
      }
    </script>
    <h1>测试innerHTML</h1>
    <input type="text" id="text1">
    <input type="button" value="测试innerHTML" οnclick="testinnerHTML();">

在这里插入图片描述

  • innerText 属性–改变页面中HTML 元素的文本内容

    注意：该方法与inmmerHTML不同的是，innerText在修改HTML文本内容的时候，里面包括HTML标签的时候，会以字符串的形式输出，而不会将HTML标签解释运行！

5.JavaScript 能够改变页面中的所有 HTML 属性

属性在html和css中都有。
Html中的属性—是给浏览器解释运行html标记时通过附加信息。
往往出现在html的开始标记中，如果有多个中间使用空格分离。
例如:
<img ></img>–<img />
<img src=”” width=”” height=”” />
src=”” width=”” height=””----Html标记中的属性
css中的属性----是用来改变html元素的样式。

  • 在html开始元素中通过style属性
    例如:
    <div style=”width:100px;height:100px”>
    style—是html属性
    width:100px;height:100px----css属性

  • 在<style>元素中和“.css”文件中
    选择器{
    css中的属性
    }

  • 控制 HTML 属性的格式:
    dom对象.具体的html属性名称=属性名称对应的属性值；

    例如:

function testattribute(){
				//dom对象.具体的html属性名称=属性名称对应的属性值；
				var imgdoc=document.getElementsByTagName("img")[0];
				//alert(imgdoc); [object HTMLImageElement]
				imgdoc.src="../code/imgs/avatar2.png";
				//imgdoc---dom对象
				//src--具体的html属性名称
				//"imgs/avatar2.png"---属性名称对应的属性值;
			}
		</script>
	</head>
	<body>
		<img src="../code/imgs/avatar.png" />
		<input type="button" value="控制html属性" οnclick="testattribute();">

在这里插入图片描述
在这里插入图片描述

  • JavaScript 能够改变页面中的所有 CSS 样式
    dom对象.style.具体的css属性名称=属性名称对应的属性值；

    例如：

function testCss() {
          //dom对象.style.具体的css属性名称=属性名称对应的属性值；
          var imgdoc = document.getElementsByTagName("img")[0];
          var button = document.getElementById("but1");
          var hdoc = document.getElementsByTagName("h1")[0];
          // alert(hdoc.innerText);  //hellotest
          // alert(hdoc.innerHTML); //hello<a href="#">test</a>
          var buttext = button.value;
          // alert(buttext);
          if (buttext == "隐藏") {
            button.value = "显示";
            imgdoc.style.display = "none";
          }
          if (buttext == "显示") {
            button.value = "隐藏";
            imgdoc.style.display = "block";
          }
        }
      </script>
    </head>

  <body>
    <h1>hello<a href="#">test</a></h1>
    <img src="../code/imgs/avatar.png" />
    <input id="but1" type="button" value="隐藏" οnclick="testCss();">
  </body>

在这里插入图片描述
在这里插入图片描述

Brryant_24
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript简单遍历DOM对象所有属性的实现方法
10-23
主要介绍了JavaScript简单遍历DOM对象所有属性的实现方法,涉及JavaScript针对页面元素属性操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript中的DOM对象
qq_44971635的博客
03-23 2299
文章目录 前言 一、DOM是什么？ 二、获取元素节点的方法 1.获取body和head节点 2.通过ID获取元素节点 3.通过class获取元素节点 4.通过name属性获取元素节点 5.通过标签名获取元素节点 6.通过css选择器获取元素节点 三、操作元素的属性 四、操作元素的样式属性 五、节点操作 六、节点的属性 六、其他 前言 提示：DOM DOM树理解。 一、DOM是什么？ 示例：DOM（document object mod...
JavaScript获取DOM对象常用方法
『愚』的博客
11-15 3969
获取DOM对象的常用方法有如下几种： getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。 getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。 getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。 getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。 样例代码： <!DOCTYPE html&gt
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript之DOM
qq_43751200的博客
06-05 1735
DOM
JavaScript之DOM对象
m0_51892736的博客
08-29 1279
JavaScript之DOM对象
第一讲_第5课__JavaScript_DOM对象模型编程.doc
06-11
第一讲_第5课__JavaScript_DOM对象模型编程
JavaScript DOM 对象深入了解
10-21
下面小编就为大家带来一篇JavaScript DOM 对象深入了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery对象和javascript对象即DOM对象相互转换
12-09
DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById(“img”).src = “test.jpg”；这里的document.getElemen
JavaScript变量Dom对象的所有属性
10-15
主要介绍了JavaScript变量Dom对象的所有属性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
基于Java的library电子图书管理系统设计源码
05-24
本项目是基于Java的library电子图书管理系统设计源码，包含32个文件，其中包括16个Java文件、3个XML文件、3个HTML文件、2个JavaScript文件、1个Gitignore文件、1个YAML文件、1个CSS文件、1个EOT文件、1个SVG文件和1个TTF文件。这个项目是一个电子图书管理系统，旨在通过Java、HTML、JavaScript和CSS技术栈实现，为用户提供高效、便捷的电子图书管理服务。
Python_微调lamamistraldelama模型和更多的指南.zip
05-24
Python_微调lamamistraldelama模型和更多的指南
基于open stack搭建私有云平台
05-24
私有云：IaaS:毕业设计
flac使用命令流-源码.zip命令流-源码_.zip
05-24
flac使用命令流-源码.zip命令流-源码_
LabelImg闪退问题及解决方案探讨.pdf
最新发布
05-24
LabelImg是一款开源的图像标注工具，广泛用于计算机视觉领域的数据准备工作。然而，在使用过程中，一些用户可能会遇到闪退问题，这不仅影响了标注工作的连续性，还可能导致数据丢失，给项目带来不必要的麻烦。本文将深入探讨LabelImg闪退问题的原因，并提供相应的解决方案，帮助用户顺利进行图像标注工作。 LabelImg闪退通常表现为应用程序突然关闭，无法正常响应用户的操作。在某些情况下，闪退可能伴随着错误信息的弹出，而在其他情况下，用户可能只是看到应用程序窗口消失，而没有任何明显的提示。这种不稳定的行为严重影响了用户的工作效率，尤其是在处理大量图像数据时。
IMG_20240524_111600.jpg
05-24
IMG_20240524_111600.jpg
智能学院Python.ipynb
05-24
智能学院Python.ipynb
人数据集检测20000张VOC+YOLO格式.zip
05-24
数据集格式：Pascal VOC格式+YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：20000 标注数量(xml文件个数)：20000 标注数量(txt文件个数)：20000 标注类别数：1 标注类别名称:["person"] 每个类别标注的框数： person 框数 = 80161 总框数：80161 使用标注工具：labelImg 标注规则：对类别进行画矩形框
Python_可扩展和用户友好的神经预测算法.zip
05-24
Python_可扩展和用户友好的神经预测算法
JavaScript~~dom对象支持resize
08-18
是的，JavaScript中的DOM对象是支持resize的。具体来说，可以通过修改DOM元素的style属性中的width和height属性来改变元素的大小。例如，可以使用以下代码将一个元素的宽度设置为200像素： ```javascript var ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值