js DOM的概念及子节点类型

最新推荐文章于 2022-10-23 23:50:26 发布
最新推荐文章于 2022-10-23 23:50:26 发布
阅读量438 收藏 1
点赞数
分类专栏： js2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35187942/article/details/85801150
版权

DOM:Document Object Model 文档对象模型

文档：html页面

文档对象：页面中元素

文档对象模型：定义为了能够让程序（js）去操作页面中的元素

 

DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵树中的每一个元素（节点）

元素.childNodes:只读 属性 子节点列表集合

只包含一级子节点，不包含后辈孙级以下节点

DOM节点的类型有很多种 12种

为什么是9不是4呢？它将ul和li,li和li之间的换行符看成了文本类型

标准下：包含了文本和元素类型的节点，【也会包含非法嵌套的子节点（如图2）

非标准下：只包含元素类型的节点，【ie7以下不会包含非法嵌套子节点

 

元素.nodeType:只读 属性 当前元素的节点类型

元素.attributes:属性 属性列表集合

---------------------------------------------------------------------------------------------

元素.children:只读 属性 子节点列表集合

标准下：只包含元素类型的节点

非标准下:只包含元素类型的节点

 

 

我的奋斗ing
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
了解javascript中的Dom操作
12-03
DOM（Document Object Model）： 结点的概念：整个文档就是由层次不同的多个节点组成，可以说结点代表了全部内容。 结点类型 1.元素结点 2.属性结点 3.文本结点 结点的注意点： 1.文本节点和属性结点都看作元素结点的子结点 2.我们一般所说的结点指的就是元素结点，将html标签看作是一个对象，并用“结点”称呼它 3.结点的关系有：父子关系、兄弟关系 1.获取元素结点 1)直接获取 ① document.getElementById() ② document.getElementsByName() ③ document.getElementsByTagNam
JS之DOM（3）（节点操作）
m0_63139310的博客
03-05 448
节点操作 之前学习到的利用DOM提供的获取元素的方法（如document.getElementById()等）逻辑性不强且较为繁琐。所以现在学习利用节点层次关系来获取元素，逻辑性强但是兼容性较差。 节点概述 网页中所有的内容都是节点（标签、属性、文本、注释等），在DOM中用node表示。 DOM树中所有的节点都可以通过JS进行访问，所有HTML元素（节点）都可以被修改也可以被创建或删除。 节点的基本属性 节点的基本属性包含了nodeType（节点类型）、nodeName（节点名称）、node..
DOM笔记1--获取DOM元素/节点/获取子（父/相邻）节点（元素）/节点增删改查/元素属性操作
weixin_42139212的博客
10-29 1万+
DOM window：全局对象。每个窗口都是一个window对象 document：window的一个属性。也是一个对象。代表当前的整个网页。保存了网页上的所有内容。通过document对象可以操作网页上的内容。 DOM：document object model 文档对象模型。定义了访问和操作HTML文档（网页）的标准方法。通过document对象操作网页上的内容。 DOM元素：HTML标签 获...
JavaScript常用DOM集合
qq_40666120的博客
09-13 282
文章目录节点的操作通过元素的id来获取相应的节点通过元素的标签名来获取节点通过元素的类名来获取节点通过元素的name属性来获取节点获取元素的所有子节点创建元素节点往父节点最后添加子节点往父节点指定节点添加子节点删除元素节点替换节点属性节点操作添加属性节点删除属性节点修改属性节点获取属性节点文本节点操作创建文本节点获取文本节点删除起始位置开始的num个值尾部添加内容中间插入内容 节点的操作 通过元素的id来获取相应的节点 document.getElementById(""); 通过元素的标签名来获取节点
dom节点操作（子父节点操作）
赵佳敏的博客
12-02 1231
一、获取当前元素的同胞兄弟元素 nextElementSibling----获取当前元素下一个元素 previousElementSibling------获取当前元素前一个元素 <button>按钮1</button> <button>按钮2</button> <button id="btn">按钮3</button> <button>按钮4</button> <button>按钮5</but
Morris算法遍历二叉树
qq_40585050的博客
09-09 551
中序遍历步骤 如果当前节点左子节点(cur.left)为空，输出当前节点(cur)，进入右子节点(cur.right)。 如果当前节点左子节点(cur.left)非空，找到当前节点左子树的最右节点(mostRight)： 1）如果该节点的右子节点(mostRight.right)为空，则将其指针指向当前节点(cur)，进入左子节点(cur.left)。 2）如果该节点的右子节点(mostRight.right)非空，则将其指针置为空，输出当前节点(cur)，进入右子节点(cur.right)。
dom获取节点（子节点、兄弟节点、父节点）
张木期的博客
07-16 1万+
今天在做一个项目拿兄弟节点的事，刚开始拿不到，后来网上查了一下，于是 便找到方法了，下面把我的问题写出来，话不多说直接上问题， 遇到的问题是我要通过点击删除按钮删除这一行数据，后端给的接口要传的参数就是设备编号（imei），重点是这个列表本身也是动态的数据，用框架渲染出来的，然后就想到了用dom节点来删除，还算比较简单， 我要获取的就是imei，然后通过ajxa调用接口删除，完美实现，下面是源码...
WebAPI-DOM树，获取父节点、获取子节点的方法汇总
weixin_44486539的博客
11-15 1207
DOM树 DOM树 又称为 文档树模型，就是把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加载到当前的页面中。 DOM树 就像人类家族的族谱，族谱可以很容易的表明家族成员之间的关系，将复杂的关系简明地表示出来。 节点操作 获取父节点 通过 parentNode 属性可以获取指定节点的父节点；如果指定的节点没有父节点就会返回 null，如果存在则返回父节点对象 语法： node.pa...
JS：DOM 获取节点
weixin_48475463的博客
01-31 1506
1. 获取元素下的所有 **子节点** .childNodes <body> <div> 我是第一个文本节点 <!-- 我是一个注释 --> <p>1</p> 我是最后一个文本节点 <p>2</p> </div> <script> var div = document.quer
Dom(1)——获取子节点childNodes、子元素节点children、getAttribute()、getElementById(）、getElementsByTagName（）......
weixin_48796690的博客
10-23 1255
JS 16—— WebAPI部分 之dom（1）
javascript 获取HTML DOM父、子、临近节点
12-04
在Web应用程序特别是Web2.0程序开发中，经常要获取页面中某个元素，然后更新该元素的样式、内容等。如何获取要更新的元素，是首先要解决的问题。令人欣慰的是，使用JavaScript获取节点的方法有很多种，这里简单做一下总结（以下方法在IE7和Firefox2.0.0.11测试通过）： 1. 通过顶层document节点获取： （1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。 如今，已经出现了如prototype、Mootools等多个Jav
jQuery与JavaScript节点创建方法的对比
11-26
1、需求：创建一个h1 标签，把它作为div元素的子节点添加到DOM节点树中。 2、基本思路是：先创建一个h1元素对象，然后添加到文档中。 3、以下是两种实现方式： // jQuery方式 var $h1 = $(...
angular-element-query:有角度的指令，可帮助其他指令了解其边界框（DOM节点）大小的变化
05-17
一个角度指令，通过通知其他指令即时DOM节点上的调整大小事件来辅助它们。 这允许DOM节点作为事件代理而不是窗口。 概念 element-query的目的是成为一个指令，该指令将通知其他指令有关直接DOM节点上的调整大小更改...
inferno：一个非常快速的类似ReactJavaScript库，用于构建现代用户界面
02-05
通过多种优化来实现性能，例如： Inferno自己的创建单态的createVNode调用，而不是createElement Inferno的diff过程使用按位标志来记住对象的形状子节点仅在需要时才被标准化可以在编译期间使用特殊的JSX标志来优化...
浅谈javascript中createElement事件
12-09
createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念 代码如下:  [removed]  [removed] = function () {  var input = document.createElement(‘input’);  var button = document....
DOM的概念及子节点类型
anbachun6816的博客
11-10 178
前言 DOM的作用是将网页转为一个javascript对象，从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型，将HTML文档解析成一系列的节点，再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。 一：DOM ==> 全称： document Object Mo...
深入了解parentNode,parentElement,childNodes,children的区别，一看就懂
weixin_44206561的博客
08-26 2726
今天是准备面试的第七天，js是由ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）组成，我们今天就了解下与DOM有关的常用接口parentNode,parentElement,childNodes,children。 parentNode，parentElement，childNodes和children都是对节点的操作，因此我们需要对dom树有一定的了解，在文档对象模型中，每一部分都是由节点组成（包括document都是一个节点），节点的类型一共有三种：元素节点，属性节点，文本节点，
JS原生 兄弟节点-前一个-后一个-任意一个-所有兄弟节点
热门推荐
MagicWing的博客
10-17 1万+
IE678 和 火狐与谷歌 的兼容问题 获取下一个兄弟节点 获取上一个兄弟节点 获取任意一个兄弟节点 获取所有兄弟节点
JS DOM节点的类型+属性+方法
qq_45560350的博客
08-17 564
什么是DOM？ DOM（Document Object Model，文档对象模型） DOM是一套方法的集合的统称，提供了一系列方法，用来操作 html 和 xml（html和xml本质上都是一个脚本，xml是html最早的版本< xml -> xhtml -> html >，xml 和 html 唯一的不同，就是xml中的标签可以自定义），也称DOM是对html以及xml的标准编程接口。 注： 任何东西都操作不了css（意思是操作样式表，操作行内样式，实际上还是操作的html间接的操
虚拟dom直接用JavaScript实现了DOM树
最新发布
07-17
1. 使用JavaScript对象来表示DOM的结构和属性，例如一个简单的节点对象可能包含标签名、属性、子节点等信息。 2. 创建虚拟DOM树，可以手动编写代码或使用相应的库来构建虚拟DOM树。 3. 对比虚拟DOM树和真实DOM树之间...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值