详解DOM编程

已于 2024-05-09 21:24:30 修改
阅读量693 收藏 19
点赞数 11
文章标签： javascript 前端
于 2024-05-09 15:31:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huaz_md/article/details/138608078
版权

华子目录

DOM操作

学习网址

Document对象

  • document对象就是window对象的子对象，主要代指的就是浏览器的可见部分（页面主体），
  • 因为页面是客户最终要看到的结果，所以DOM编程就显得尤为重要了。
  • 当浏览器加载一个 HTML 文档时，会创建一个 Document对象，Document对象是 DOM树中所有节点的根节点。通过 Document 对象我们可以访问 HTML 文档中的所有元素。
  • 提示：Document 对象是 Window 对象的一部分，所以您可以通过 window.document 来访问 Document 对象。

document对象属性

在JavaScript中，document 对象代表了整个HTML文档，并提供了对文档内容、结构和样式进行访问和修改的接口。document 对象包含了许多属性和方法，以下是一些常见的 document 对象属性：

属性

  1. documentElement

    • 返回文档中的根元素（通常是 <html> 元素）。

  2. URL（只读）

    • 返回当前文档的完整URL。

  3. domain

    • 返回当前文档的域名。出于安全原因，某些浏览器可能限制或修改此属性的值。

  4. referrer（只读）

    • 返回加载当前文档的文档的URL。如果当前文档不是由其他文档引用的，则此属性为空字符串。

  5. title

    • 返回或设置文档的标题（即 <title> 元素中的文本）。

  6. body

    • 返回文档的 <body> 元素或 null（如果文档中没有 <body> 元素）。

  7. head

    • 返回文档的 <head> 元素或 null（如果文档中没有 <head> 元素）。

  8. documentElement

    • 返回文档的根元素，通常是 <html> 元素。

  9. lastModified（只读）

    • 返回文档最后修改的日期和时间（字符串格式）。

  10. charset

    • 返回文档的字符编码。

  11. characterSet

    • 与 charset 相同，返回文档的字符编码。

  12. doctype

    • 返回与文档关联的文档类型声明（Document Type Declaration, DOCTYPE）或 null（如果文档没有DOCTYPE）。

  13. cookie

    • 返回文档相关的cookie。对于设置cookie，通常使用 document.cookie = "key=value; expires=date; path=path; domain=domain; secure"。

  14. forms

    • 返回一个 HTMLCollection，它包含了文档中所有的 <form> 元素。

  15. images

    • 返回一个 HTMLCollection，它包含了文档中所有的 <img> 元素。

  16. links

    • 返回一个 HTMLCollection，它包含了文档中所有的 <a> 和 <area> 元素，这些元素具有 href 属性。

  17. scripts

    • 返回一个 HTMLCollection，它包含了文档中所有的 <script> 元素。

  18. styleSheets

    • 返回一个 StyleSheetList，它包含了文档中所有的样式表。

  19. fullscreenEnabled（只读）

    • 返回一个布尔值，表示浏览器是否支持全屏API（如果浏览器支持且用户允许，则页面可以进入全屏模式）。

  20. compatMode（只读）

    • 返回文档的渲染模式，可以是 “BackCompat”（向后兼容模式）或 “CSS1Compat”（标准模式）。

示例

  1. 获取文档标题：
console.log(document.title);
  1. 设置文档标题：
document.title = "新的页面标题";
  1. 获取所有表单元素：
var forms = document.forms;
for (var i = 0; i < forms.length; i++) {
    console.log(forms[i].name);
}

请注意，document 对象还包含了许多用于操作文档内容、结构和样式的方法，如 createElement(), appendChild(), getElementById(), getElementsByClassName(), getElementsByTagName(), 等等。

在这里插入图片描述

document对象方法

document 对象在 JavaScript 中提供了许多用于操作 HTML 文档内容、结构和样式的方法。以下是一些常见的 document 对象方法：

  1. getElementById(id)

    • 返回对拥有指定 ID 的第一个对象的引用。

  2. getElementsByClassName(name)

    • 返回文档中所有具有指定类名的元素的集合，作为 NodeList 对象。

  3. getElementsByTagName(name)

    • 返回文档中所有具有指定标签名的元素的集合，作为 HTMLCollection 对象。

  4. getElementsByName()

    • 返回带有指定名称的对象集合。

  5. createElement(tagName)

    • 创建一个新的元素节点，元素类型由参数指定。

  6. createTextNode(data)

    • 创建一个新的文本节点，文本内容由参数指定。

  7. createAttribute()

    • 创建一个属性节点

  8. activeElement

    • 返回当前获取焦点元素

  9. addEventListener()

    • 向文档添加监听事件

  10. appendChild(node)

  • 将一个节点添加到指定父节点的子节点列表的末尾。
  1. removeChild(node)
  • 从子节点列表中删除指定的子节点。
  1. replaceChild(newNode, oldNode)
  • 替换子节点列表中的某个子节点。
  1. insertBefore(newNode, referenceNode)
  • 在指定的参考节点之前插入新的子节点。

  1. hasFocus()

    • 如果文档有焦点，则返回 true；否则返回 false。

  2. execCommand(commandId, showUI, value)

    • 在当前文档上执行命令，如编辑命令（如剪切、复制、粘贴等）。请注意，execCommand 方法在现代浏览器中可能不再被支持或具有限制的使用场景。

  3. querySelector(selector)

    • 返回文档中匹配指定 CSS 选择器的第一个 Element 元素。如果没有找到匹配的元素，则返回 null。

  4. querySelectorAll(selector)

    • 返回文档中匹配指定 CSS 选择器的所有 Element 元素的 NodeList（静态的）。

  5. addEventListener(type, listener[, options])

    • 向指定元素添加事件句柄。

  6. removeEventListener(type, listener[, options])

    • 从指定元素中删除之前添加的事件句柄。

  7. write(htmlExpr)

    • 向 HTML 输出流写内容。此方法主要用于动态生成 HTML 内容，但通常不推荐在文档加载完成后使用，因为它会覆盖整个页面内容。

  8. writeln(htmlExpr)

    • 与 write() 类似，但会在输出内容的末尾添加一个换行符。

  9. open(url, name[, features[, replace]])

    • 打开一个新的浏览器窗口或一个新的标签页，具体取决于浏览器和参数设置。此方法通常与 write() 和 close() 一起使用来动态加载新页面。

  10. close()

    • 关闭由 document.open() 方法打开的输出流，并显示选定的内容。

  11. scrollTo(x-coord, y-coord)

    • 滚动当前窗口到指定的坐标。

  12. scrollBy(x-coord, y-coord)

    • 滚动当前窗口，基于当前滚动位置滚动指定的偏移量。

  13. scrollToView(element)

    • 滚动页面到指定的元素，使其可见。注意，此方法在标准 HTML 中并不存在，但某些浏览器可能提供了类似的方法或扩展。

示例

  1. 创建并添加一个新元素：
var newElement = document.createElement("div"); // 创建一个新的 div 元素
newElement.innerHTML = "Hello, world!"; // 设置元素的内容
document.body.appendChild(newElement); // 将新元素添加到 body 的子节点列表的末尾
  1. 获取并修改所有具有特定类名的元素：
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
    elements[i].style.color = "red"; // 修改所有元素的文本颜色为红色
}
  1. 使用 addEventListener 添加事件监听器：
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

这些方法允许你以编程方式操作 HTML 文档，从简单的元素创建和修改到复杂的事件处理和交互。

  • 方法中：获取DOM对象的方法6个方法必须掌握。创建标签和属性的方法也必须掌握。

在这里插入图片描述

DOM对象节点

  • 节点 node 可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType 和 nodeValue
document.getElementById('box').nodeType // 1表示元素节点
  • 节点的层次结构可以划分为： 父节点与子节点 、 兄弟节点 这三种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点

在这里插入图片描述

操作网页元素分为两步:

1.找出元素
2.对应的元素实施操作

DOM元素的选中方式

Element -- 元素
函数语法基本都是小驼峰
1.通过id获取元素
	document.getElementById() 
2.通过class获取元素
	document.getElementsByClassName() 
3.通过标签名获取元素
	document.getElementsByTagName()

获取的元素默认值为HTMLCollection 类似于数组 但是他不是数组
	同:数据都有下标的概念/数据可以被遍历
	异:他不可以使用数组方法
基于这个原因 如果直接对伪数组进行dom操作都是无效 我们要操作的不是这个伪数组 而是这个伪数组里的元素 所以要添加下标来访问对应的元素

DOM操作文本内容

  • DOM中，当我们获取DOM对象后，有可能需要修改DOM对象的内容，那么有如下三种方式：

    • innerText【非W3C标准】
    • textContent【W3C标准】
    • innerHTML 【慎用】 XSS攻击

  • innerHTML插入的子元素会解析HTML标签，innerText和textContent不会解析标签，只是将内容当成文本插入。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="box">多喝岩浆</div>

    <div class="water">123</div>
    <div class="water">456</div>
    <div class="water">789</div>

    <p>罗普</p>
    <p>婷婷</p>
    <p>吴昊</p>

    <script>
        //通过id获取元素
        let box = document.getElementById('box')
        box.innerText = '多喝热水' //修改元素的文本内容
        console.log(box, typeof box)
        console.log(box.innerText)// 查看元素的文本内容

        //通过class获取元素
        let water = document.getElementsByClassName('water')
        console.log(water, typeof water) //伪数组
        // water.innerText = '早上好'
        // water[0].innerText = '早上好'
        // water[1].innerText = '中午好'
        // water[2].innerText = '晚上好'

        for (let i = 0; i < water.length; i++) {
            water[i].innerText = `要多喝热水 这是第${i}杯`
        }

        //通过标签名获取元素
        let p = document.getElementsByTagName('p')[1]
        //取标签元素的时候 就指定 我要取的是下标为1的元素而不是全部
        p.innerText='小概率'
        // p[1].innerText='小概率'

    </script>
</body>

</html>

DOM操作对象属性

常见的DOM对象属性操作有三种方式：

  • DOM对象.属性名
  • DOM对象[属性名]
  • 调用系统API - getAttribute(属性名)、setAttribute(属性名, 属性值)
操作元素属性 --> 获取到元素后 ,通过元素名. 的方式进行操作
	元素名.属性名 //使用元素的属性
	元素名.属性名 = xxx // 修改元素属性
	
	元素名.title //设置/获取元素的标题
	元素名.src //设置/获取元素的资源路径
	元素名.className //设置/获取元素的类名

	//通过api接口函数获取和设置
	元素名.getAttribute(属性名)  //获取属性值
	元素名.setAttribute(属性名, 属性值)   //设置属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: #096;
        }
        .tt{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <img src="../img/2.jpg" alt="">

    <div class="box"></div>

    <script>
        let img = document.getElementsByTagName('img')[0]
        console.log(img.src) //查看img路径的位置

        img.src = '../img/3.jpg'

        let box = document.getElementsByClassName('box')[0]
        box.className = 'tt'
    </script>
</body>
</html>

DOM操作元素样式

获取样式的值

  • 元素名.style.样式名
操作元素样式(css) --> 获取元素后，通过元素名.style.样式名 的方式进行操作
	元素名.style.样式名 //访问该元素的css样式
	元素名.style.width // 访问元素的宽度样式
	
如果css的样式有(-)减号作为连接符 在用js写时候 不写链接符而是用小驼峰命名法
font-size --> fontSize
background-color --> backgroundColor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div id="hot">多喝岩浆</div>

    <script>
        let hot = document.getElementById('hot')
        hot.style.color = 'pink'
        hot.style.fontSize = '66px'

        let box = document.getElementsByClassName('box')[0]
        box.style.backgroundColor = '#096'
        box.style.border = '3px solid #ccc'

    </script>
</body>
</html>

总结

document.getElementsByClassName('box')[0]

  • 在JavaScript中，document.getElementsByClassName('box') 是一个方法，它返回文档中所有具有指定类名（在这个例子中是 'box'）的元素的HTMLCollection。这个HTMLCollection是一个类数组对象，包含了所有匹配的元素。

  • 当你在这后面加上 [0]，你实际上是在访问这个HTMLCollection中的第一个元素。在JavaScript中，数组和类数组对象（如HTMLCollection和NodeList）都可以使用索引来访问其元素，其中索引从0开始。

所以，let box = document.getElementsByClassName('box')[0] 这行代码的意思是：

  1. 找到所有类名为 'box' 的元素。
  2. 从这些元素中取出第一个元素。
  3. 将这个元素赋值给变量 box。

现在，变量 box 包含了文档中第一个类名为 'box' 的元素，你可以对它进行各种操作，比如修改它的样式、内容或添加事件监听器等。

^～^前行者～～～
关注
  • 11
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
第七章 DOM 编程
myid00451612的博客
01-13 946
第一节：DOM编程概述 1.1 什么是DOM编程 ​ 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中。 1.2 为什么要学习DOM编程 学习DOM操作 就是 操作页面中的节点对象（元素，文本，元素中的属性）。 增删改 新增：新增什么？ 各种标签 本来不存在，但是我们又想用， 无中生有！ 创造标签 此时没有样式 创建 美化（设置样式，添加内容）.
JsDom 编程小结
10-28
### JsDom 编程小结知识点详解 #### 1. 浏览器兼容问题 - **不同浏览器对 DOM 操作的支持差异**：如 IE6 和 IE7 对 `table.appendChild("tr")` 的支持与 IE8 不同。为解决此问题，可以采用 `insertRow` 和 `...
DOM编程
weixin_67235801的博客
03-03 1079
有趣的网页编码
DOM编程基础
2301_76988707的博客
03-31 439
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
极致DOM编程体验：JavaScript DOM基础理论解析和实践应用，让Web前端开发更加高效
weixin_43263566的博客
10-06 1667
DOM
dom编程的笔记
09-05
### DOM编程知识点详解 #### DOM概述 DOM，全称为Document Object Model，即文档对象模型，是一种处理可扩展标记语言的标准编程接口。它提供了一种在HTML或XML文档中读取和修改内容、结构以及样式的手段。DOM允许...
JavaScript中DOM详解
10-24
JavaScript中DOM操作详解主要涉及了使用jQuery进行DOM操作以及在不同的浏览器，特别是火狐(Firefox)和IE(微软Internet Explorer)浏览器之间存在的一些JavaScript差异。本文将详细介绍这些内容，并提供一些编写跨...
JavaScriptDOM编程艺术（第2版）PDF版本下载.txt
07-17
根据提供的文件信息，我们可以推断出这是一本关于JavaScript DOM编程技术的书籍——《JavaScript DOM编程艺术（第2版）》。尽管实际书籍内容并未给出，但从标题、描述及部分链接信息来看，这本书主要涉及JavaScript...
DOM编程详解(含HTML部分)
11-26
DOM编程详解(含HTML部分)涉及的是Web开发中的一种核心技术，它允许开发者通过JavaScript等脚本语言操作HTML和XML文档。DOM，全称为Document Object Model，是一种标准接口，无论浏览器、操作系统还是编程语言，都能...
javascript.dom编程艺术源码
01-06
javascript.dom编程艺术源码,每章节的源码都在，是配套的
js DOM编程
08-16
javascript DOM编程之13. 尚硅谷_佟刚_JavaScript DOM编程_innerHTML属性
JS-----第七章DOM编程
BUG专业户
06-06 950
DOM编程概述 节点操作(增删改查) 购物车 发表说说 JSON对象 模板字符串
JavaScript-DOM编程
最新发布
weixin_44201223的博客
05-16 421
什么是DOM编程 获取页面元素的几种方式 操作元素
前端（十四）——DOM节点操作手册：你需要了解的一切
杜永康的博客
08-24 3657
DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。
第十四章 DOM编程
目小温的博客
06-18 160
学习记录 0618
DOM编程进阶（JS）
无法自律的人的博客
03-13 729
本篇是DOM编程基础（JS）的进阶版
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

^～^前行者～～～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值