javascipt中的DOM对象

简介: 1.HTML中DOM对象的概念HTML Document Object Model(文档对象模型)HTML DOM定义了访问和操作HTML文档的标准方法HTML DOM把HTML文档呈现为带有元素,属性和文本的树结构(节点树)2.

1.HTML中DOM对象的概念

HTML Document Object Model(文档对象模型)
HTML DOM定义了访问和操作HTML文档的标准方法
HTML DOM把HTML文档呈现为带有元素,属性和文本的树结构(节点树)

2.DOM树

如图所示:

img_f3a827759cc65f7205ecdc96c22c0182.png

展示文档中各对象之间的关系,用于对象的导航

3.DOM节点

3.1 节点类型

HTML文档中的每个成分都是一个节点

DOM的规范:

整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点

如图所示:

img_117f9eac37b1820f4f37e67ee130a819.png

3.2 节点关系

节点树中的节点彼此拥有层级关系

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系,

父节点拥有子节点,同级的子节点被称为同胞(兄弟或姐妹)

在节点树中,顶端节点被称为根(root)
每个节点都有父节点,除了根,根没有父节点
一个节点可以拥有任意数量的子节点
同胞是拥有相同父节点的节点

下图的图片展示了节点树的一部分,以及节点之间的关系

img_41f3e79960ca8b172c0a6d832f7f7ce9.png

访问HTML元素(节点),访问HTML元素等同于访问节点,可以以不同的方式来访问HTML元素

3.3 节点查找

document.getElementById("id_name")              //根据id号查找节点
document.getElementsByTagName("tag_name")       //根据标签名查找节点
document.getElementsByClassName("class_name")   //根据类名查找节点
document.getElementsByName("name")              //根据标签名称查找节点

实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <div class="first_div">
        <div id="second_div">
            <p class="p1">1111</p>
            <p class="p2">2222</p>
            <p class="p3">3333</p>
        </div>
    </div>
</div>
<script>
    var ele1=document.getElementsByTagName("p");
    console.log(ele1);
</script>
</body>
</html>

查找代码中所有的"p"标签:

var ele1=document.getElementsByTagName("p");
console.log(ele1);

查找结果如下:

img_0c8432daa6acd3078af19fec21f30cec.png

查找代码中类名为"first_div"的标签:

var ele1=document.getElementsByClassName("first_div");
console.log(ele1);

查找结果如下:

img_91d187993325be8ca7e5ed309c8cf53b.png

查找代码中名为"p1"的标签:

var ele1=document.getElementsByName("p1");
console.log(ele1);

查找结果如下:

img_a7fdde6b71d09ed09ea2fd19b23394ef.png

查找代码中id为"second_div"的标签:

var ele1=document.getElementById("second_div");
console.log(ele1);

查找结果如下:

img_6db8e63747404c4484ce2f4a58ec1662.png

3.4 导航节点的属性

parentElement               //父节点标签元素
children                    //所有的子标签元素
firstElementChild           //第一个子标签元素
lastElementChild            //最后一个子标签元素
nextElementSibling          //下一个兄弟标签
previousElementSibling      //上一个兄弟标签

需要注意的是,javascript中没有办法一次性找到所有的兄弟标签

只能先找到父标签,再根据父标签的子标签来查找兄弟标签

实例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1">
    <div class="father_div">
        <div id="first_div">first div</div>
        <div id="second_div">
            <p class="p1" name="p1">1111</p>
            <p class="p2">2222</p>
            <p class="p3" name="p3">3333</p>
        </div>
        <div id="third_div">third div</div>
        <div id="fourth_div">fourth div</div>
    </div>
</div>
<script>
    var ele1=document.getElementById("second_div");
    console.log(ele1);
</script>
</body>
</html>

节点树的关系如图所示:

img_db21cf4d1b775f160329c9f15e9ec39a.png

导航节点用法如下:

//取得"second_div"这个标签
var ele1=document.getElementById("second_div");
console.log(ele1);

//取得"second_div"标签的父节点,即"father_div"
var ele2=ele1.parentElement;
console.log(ele2);

//根据上面找到的"father_div",查找其所有的子标签
var ele3=ele2.children;
console.log(ele3);

//根据"second_div"标签查找其第一个子标签,即"p1"节点
var ele4=ele1.firstElementChild;
console.log(ele4);

//根据"second_div"标签查找其最后一个子标签,即"p3"标签
var ele5=ele1.lastElementChild;
console.log(ele5);

//根据"second_div"查找上一个兄弟标签,即"first_div"节点
var ele6=ele1.nextElementSibling;
console.log(ele6);

//根据"second_div"查找下一个兄弟标签,即"third_div"节点
var ele7=ele1.previousElementSibling;
console.log(ele7);

上面代码的查找结果如下:

img_40d73ed58afe07ef748ee9e20d47c3b5.png

想根据"second_div"标签找到"fourth_div"标签,代码如下:

//找到"second_div"这个标签
var ele1=document.getElementById("second_div");

//根据"second_div"这个标签找到父标签,即"father_div"
var ele2=ele1.parentElement;

//根据"father_div"标签找到最后一个子标签,即"fourth_div"标签
var ele3=ele2.lastElementChild;
console.log(ele3);

查找结果如下:

img_be1846293db9c5ab1425bd119711a0f3.png

3.5 导航节点属性设置

div标签:

var ele1 = document.getElementById("div1");
ele1.className = "div1";            # 为标签设置class名为:div1
ele1.style.color = "red";           # 为标签设置颜色为:red
ele1.style.background = "blue";     # 为标签设置背景颜色为:blue
ele1.style.fontSize = "20px;"       # 为标签设置字体大小为:30px
ele1.title = "aaaa";                    # 为标签设置title属性为:aaa
ele1.innerHTML();                   # 读写div标签包括的内容
ele1.innerHTML="aaa";               # 设置div标签所包括的内容
ele1.innerHTML="<a href='www.baidu.com'>百度</a>";    # 设置div标签的内容为a标签

a标签:

var ele2 = document.getElementById("link");
ele2.href = "www.baidu.com";             # 为a标签设置href属性
ele2.title = "百度";                     # 为a标签设置title属性
var attr = "background";                # 定义attr变量为:background属性
ele2.style[attr] = "red";               # 为标签设置attr变量的样式,即background属性为:red
ele2["style"][attr] = "red";            # 为标签设置attr变量的样式,即background属性为:red
目录
相关文章
N..
|
5月前
|
JavaScript 前端开发 UED
DOM编程中的form对象
DOM编程中的form对象
N..
32 0
N..
|
5月前
|
XML JavaScript 数据格式
DOM编程中的Document对象
DOM编程中的Document对象
N..
51 0
|
5月前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
2月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
18 1
js之DOM 文档对象模型
|
2月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
46 1
|
2月前
|
JavaScript 前端开发 API
前端开发者的救赎:揭秘JQ对象与DOM元素的神秘转换术
【8月更文挑战第23天】在Web前端开发领域,jQuery(简称JQ)作为一款流行的JavaScript库,极大简化了HTML文档遍历、事件处理、动画及Ajax交互等操作。理解和掌握jQuery对象与DOM元素间的转换至关重要。
31 0
|
2月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
4月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
36 1
|
3月前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
41 0
|
4月前
|
JavaScript 前端开发 API
jQuery对象与DOM对象简介及相互转换
jQuery对象与DOM对象简介及相互转换