JavaScript中的DOM简介及应用

最新推荐文章于 2022-11-12 10:25:59 发布
最新推荐文章于 2022-11-12 10:25:59 发布
阅读量462 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Eternal_tyq/article/details/78869076
版权

1.getAttribute（）
通过元素节点的属性名称获取属性的值
setAttribute（）
通过元素节点的属性名称设置属性的值
eg.

document.getElementsByTagName("a")[0].getAttribute("href")
document.getElementsByTagName("a")[0].setAttribute("href","http://www.hao123.com")

2.访问子节点

  • childNodes 子节点（包含空节点）
  • firstChild 第一个子节点（包含空节点）
  • lastChild 最后一个子节点（包含空节点）
  • Children 子节点（不包含空节点）
  • firstElementChild 不包空的第一个子节点
  • lastElementChild 不包含空的最后一个子节点
    eg.
alert(newp.childNodes.length)
alert(newp.children.length)
alert(newp.children[0].innerText)
alert(newp.firstElementChild.innerText)
alert(newp.lastChild.innerText)
alert(newp.parentNode.parentNode.nodeName)

3.访问父节点
parentNode 访问父节点，可嵌套使用去寻找父节点的父节点
offsetParent 访问有定位属性的父节点

4.兄弟节点

  • nextSibling 访问后一个兄弟节点（含空节点）
  • previousSibling 访问前一个兄弟节点（含空节点）
  • nextElementSibling 访问后一个兄弟节点（不含空节点）
  • previousElementSibling访问前一个兄弟节点（不含空节点）

eg.

alert(one.previousSibling.innerText)
alert(one.nextSibling.innerText)
alert(one.previousElementSibling.innerText)
alert(one.nextElementSibling.innerText)

5.插入节点
创建节点：
document.createTextNode（“ ”）创建文本节点
document.createElement（“ ”）创建元素节点
添加子节点：
appendChild（）

eg.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>

<script>
    var newli=document.createElement("li");
    var uls=document.getElementsByTagName("ul")[0];
    newli.className="one";
    newli.innerText="hello,world";
    uls.appendChild(newli)
</script>
</body>
</html>

这里写图片描述

6.删除节点
removeChild（）

7.替换节点
replaceChild（新节点，旧节点）

用法： 父元素名.replaceChild（新节点，旧节点）

8.DOM EventListener事件监听
作用：可以给同一个事件绑定不同或相同的事件

用法：element.addEventListener（“event”，function，useCapture）;

event——事件类型，如click或mousedown
function——事件触发后调用的函数
useCapture——Boolean值，用于描述事件是冒泡还是捕获。
Eternal_tyq
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript IE中的DOM ready应用技巧
10-30
当我们想在页面加载之后执行某个函数，肯定会想到onload了 但onload在浏览器看来，就是页面上的东西全部都加载完毕后才能发生，但那就为时已晚了。
JavaScript中DOM对象的思维导图
11-05
DOM的广泛应用在于它可以实现动态网页，通过JavaScript改变页面内容、样式，响应用户交互，使得网页不仅仅是一个静态的展示，而成为一个交互丰富的应用。了解并熟练掌握DOM对象及其操作方法对于JavaScript开发者来说...
一文吃透JavaScript中的DOM知识及用法
最新发布
不迁怒，不贰过。小知识，大智慧。
11-12 4169
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
JavaScript中的DOM应用
m0_68284186的博客
04-08 593
JavaScript中的DOM应用
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript DOM操作
好好学习天天向上
03-27 5115
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
JavaScript之彻底搞懂DOM与BOM及其区别与用法
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
前端技术学习第四讲：JavaScript中DOM和BOM
跟着老高学Java
03-27 1659
JavaScript中DOM和BOM 一、DOM和BOM DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。 BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可
DOM简介
qq_51088023的博客
07-15 1151
​​​​​DOM全称Document Object Model（文档对象模型）
Javascript之理解BOM和DOM
pakerder的博客
10-13 1017
一个完整的JavaScript实现应该由以下三个部分构成：ECMAScript、DOM、BOM. ECMAScript: ES规定了JS的变成语法和基础核心知识，是所有浏览器厂商都遵守的JS语法工业标准。 DOM: 文档对象模型（Document Object Model），让我们通过DOM提供的接口来操作网页。DOM中，文档表示的就是整个HTML网页文档；对象表示将网页每个部分转换为一个对象；模型为使用模型表示对象间的关系，方便我们获取对象。通过dom，可以访问、
DOM 简介
weixin_48376132的博客
07-05 9657
DOM 简介 1. DOM 概念 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。 它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。 DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。 总结：W3C 已经定义了一系列
JavaScript与DOM编程
寻梦&之璐
05-05 6199
文章目录JS简介常量与变量 JS简介 JS是一种在浏览器中运行的解释性脚本语言。JS是由ES（ECMAScript），DOM（文档对象模型），BOM（浏览器对象模型）组成 ECMAScript 6.0（简称 ES6）是JavaScript语言的下一代标准，已经在2015年6月发布。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，称为企业级开发语言 Node.js是一个基于Chrome V8引擎的JavaScript运行环境，是让JS运行在服务端的开发平台，它使得JS成为与PHP，Py
javascript针对DOM的应用分析（三）
12-11
JavaScript中的DOM（Document Object Model）是网页内容的结构化表示，允许我们通过编程方式操作HTML和XML文档。在本文中，我们将重点讨论DOM元素的样式操作以及如何动态创建DOM元素。 （一）DOM元素的样式操作 1....
javascript针对DOM的应用实例（一）
10-28
所谓针对DOM的应用。也就我这里只教大家用javascript操作页面中dom元素做交互
JavaScript_DOM编程艺术第二版（中文）
03-12
总的来说，"JavaScript DOM编程艺术第二版"是一本全面介绍JavaScript与DOM结合的实践指南，它将帮助读者从初级到高级，系统地掌握JavaScript在网页动态化中的应用，提升Web开发技能。通过阅读这本书，开发者不仅能...
jQuery中如何获取元素的索引值&js获取索引
Eternal_tyq的博客
03-19 7655
今天在做一个页面导航栏的过程中遇到了一个小问题，解决之后进行总结，归根结底是“jQuery中如何获取元素的索引值的问题”。所以首先补充一下基础知识：jQuery中获取元素索引值有一个方法：index（）；这个方法返回指定元素相对于其他指定元素的 index 位置，如果未找到元素，index() 将返回 -1。它用在两种情况下：1.寻找元素相对于同胞元素的索引index&lt;script&gt; ...
JS 对象的扩展
Eternal_tyq的博客
09-23 1547
1 属性的简洁表示法 ES6允许在大括号内，直接写入变量和函数，作为对象的属性和方法。这样书写更加简洁。 1.属性简写 const foo = 'baz' const obj = { foo } // { foo: 'baz' } function f(x, y) { return { x, y} } f(1, 2) // {x: 1, y: 2} 2.方法简写 ...
CSS3中的2D转换及动画效果
Eternal_tyq的博客
11-20 1172
CSS中的2D变形主要用transform属性来实现，其可以用来控制元素的变形，如移动，比例化，反过来，旋转，和拉伸。 transform属性的基本语法如下1.translate（） 移动元素，即基于X和Y 坐标重新定义元素位置。 用法如下： transform:translate(300px,200px)； 或 transform:translate
Vue中slot的理解与使用
Eternal_tyq的博客
02-14 1140
slot是什么？ slot俗称“插槽”，可以通过其向组件内部指定位置传递内容。 slot能够解决什么问题？ 在正常的开发情况下，如果存在以下子组件child.vue， child.vue &lt;template&gt; &lt;div&gt; Hello World &lt;/div&gt; &lt;/template&gt; 假如我们在父组件中这样引用它 pa...
JavaScript与DOM应用教程：实战与库项目详解
《JavaScript 捷径教程》是一本深入浅出的IT专业书籍，主要聚焦于JavaScript编程语言及其在网页开发中的应用，特别是与Document Object Model (DOM) 的结合。DOM是浏览器解析HTML文档并提供接口进行动态更新的技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值