讲解DOM节点的获取(⼆)

于 2019-08-25 23:42:33 发布
阅读量169 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44415461/article/details/100067699
版权

获取第⼀个⼦节点
firstChild 有可能会匹配到是空⽩或换⾏的节点信息

firstElementChild 不会匹配空⽩或换⾏的节点信息(获取到的
是元素节点，不会获取到⽂本节点)

获取最后⼀个⼦节点
lastChild 有可能会匹配到是空⽩或换⾏的节点信息

lastElementChild 不会匹配空⽩或换⾏的节点信息(获取到的
是元素节点，不会获取到⽂本节点)

获取兄弟节点
previousSibling和previousElementSibling 获取上⼀个兄弟
节点
previousSibling 有可能会匹配到是空⽩或换⾏的节点信息

previousElementSibling 不会匹配空⽩或换⾏的节点信息
(获取到的是元素节点，不会获取到⽂本节点)

nextSibling和nextElementSibling 获取下⼀个兄弟节点

nextSibling 有可能会匹配到是空⽩或换⾏的节点信息

nextElementSibling 不会匹配空⽩或换⾏的节点信息(获取
到的是元素节点，不会获取到⽂本节点)

在这里插入代码片
Mr.ZKH
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
老生常谈jacascript DOM节点获取
08-30
标题和描述所指的知识点是JavaScript中DOM（文档对象模型）节点获取的方法，即如何在编写JavaScript代码时获取HTML文档中的特定元素节点。下面详细说明这部分内容。 1. `getElementById()`: 这是获取单个DOM节点最...
浅谈JavaScript中树的先序、中序、后序遍历
筱葭的博客
03-15 752
function preOrder(node) { var nodes = []; if (node != null) { nodes.push(node); preOrder(node.firstElementChild); if (node.firstElementChild != node.lastElementChild) preOrder(node.lastEle
firstElementChild
weixin_30856725的博客
08-06 296
firstElementChild用于在高版本的浏览器中获取第一个子节点。在IE6-8中是不兼容的，他们应该用firstChild。在写的时候用一个if语句判断一下就好了。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title&g...
firstChild与firstElementChild的兼容处理
道路是曲折的，前途是光明的
11-24 2875
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload=function(){ var oUl=document.getElementById(
Javascript：节点的操作与Style、事件
Golden_soft的专栏
06-01 1437
               javaScript操作节点(Element)firstElementChild跟firstChild的区别在于，有Element代表元素，firstElementChild是元素选择器，非元素他是不会选择到的，如文本节点之类的。而firstChild是所有都选择所有节点，包括文本。注意：IE8以上的不支持元素选择器。一、常用方法：            元素对象.p...
js获取子元素
时光的博客
07-17 3万+
在原生js里获取子元素childNodes ，但是在一些浏览器会把空格当成子元素 html html： &lt;div class="box"&gt; &lt;div&gt;2&lt;/div&gt; &lt;div&gt;1&lt;/div&gt; &lt;/div&gt; Js： var $ = function(o){ //获取元素函数 return doc
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
javascript获取dom的下一个节点方法
10-25
本文档详细解释了如何使用JavaScript获取DOM元素的下一个节点，并结合加减按钮实现数字累加的实例，来展示这一技术的应用。 首先，涉及到几个重要的DOM操作方法：`nextElementSibling`和`previousElementSibling`。...
jQuery获取DOM节点实例分析(2种方式)
10-23
本文将深入分析jQuery获取DOM节点的两种主要方法，并讨论它们的应用场景和细节。 首先，需要了解的是，当使用jQuery的$函数选中DOM元素后，返回的其实是一个类数组对象，而非纯DOM对象。这个类数组对象的每一个元素...
3firstElementChild
Kasekale的博客
11-13 300
firstElementChild lastElementChild
Ajax完成页面增删改查
H&B Blog
07-24 1193
在页面中可以完成对数据库中的数据的一些操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hw7</title> <style> table{ border-collapse: collapse; w...
firstElementChild与firstChild区别
12-19 1万+
Element Traversal规范中的firstElementChild、lastElementChild、previousElementSibling、nextElementSibling、childElementCount属性 Element Traversal规范定义了ElementTraversal接口，它允许脚本遍历DOM树中的元素（element）节点，而不包含元素节点之外的
5，jsDOM 子节点，父节点，第一个子节点，最后一个子节点，DOM获取属性，设置属性...
weixin_30820151的博客
06-18 416
ECMAScript DOM BOM DOM:DocumentObjectModel 文档对象模型：一种用于HTML和XML文档的编程接口。 childNodes:子节点；子节点只包含父级下的第一层 alert(oParent.childNodes);ie6-8中只包括元素节点（值为1）；高级浏览器中会包括文本节点（值为3）； <ul id='ul1'> &l...
巧用 firstElementChild
liuzijiang1123的专栏
04-24 2435
firstElementChild：是用于返回DOM对象的第一个子元素。 举个小例子了解一下： &lt;div&gt; &lt;p&gt;123&lt;/p&gt; &lt;p&gt;456&lt;/p&gt; &lt;/div&gt; var oDiv=document.getElementsByTagName("div")[0]; cons
JS获取子节点、父节点和兄弟节点的若干种方式
热门推荐
laok_的博客
07-22 27万+
一、js获取子节点的方式1.通过获取dom方式直接获取子节点其中test的父标签id的值，div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document.getElementById("test").getElementsByTagName("div"); 2.通过childNodes获取子节点使用child
firstChild和firstElementChild的区别
learner_boy的博客
05-15 3751
firstChild可以获取文本元素而firstElemenChild不能 . 它们的共同点都是获取父节点下第一个节点对象。 .但是firstElementChild只会获取元素节点对象，从名称就可以看出来，firstChild则可以获取文本节点对象（当然也可以获取元素节点对象），比如空格和换行都被当做文本节点。
javascript教程2:---DOM操作
weixin_30312563的博客
01-08 182
1、DOM 简介 　　当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理 HTML 文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构，即节点树。通过 DOM，JS 可创建动态的 HTML，可以使网页显示动态效果并实现与用户的交互功能。JS 能够改变页面中所有的 HTML 元素、属性和 CSS 样式，并...
JavaScript操作DOM对象（节点信息、操作节点、style属性、获取元素样式）
baolingye的博客
06-26 3928
JavaScript操作DOM对象 一、DOM概述 Document Object Model，即文档对象模型 DOM DOM Core CSS-DOM HTML-DOM 节点与节点的关系 二、访问节点 使用getElement系列方法访问指定节点 getElementById() 通过id访问节点 getElementsByName() 通过类名访问节点 getEl...
获取子类元素，FirstElementChild、children和ChildNode等等
weixin_40722928的博客
12-17 1828
目的是想要获得第一个div里面的“111”和“123”这个元素，作为字符串输出。 1、使用firstElementChild var ad=document.getElementsByTagName('div')[0].firstChild; console.log(ad); 获得的是text类型的111
jq 渲染dom后获取dom节点
最新发布
03-29
在使用 jq 渲染 DOM 后，可以通过以下方式获取 DOM 节点： 1.通过标签名获取节点： ```javascript $('标签名') ``` 例如： ```javascript var divList = $('div'); ``` 2.通过类名获取节点： ```javascript $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值