JS获取DOM节点

爱被打了一巴掌 2023-06-11 04:23 4阅读 0赞

<div id ="father">
    	<div id='target'>
    		<div id="children1"></div>
    		<div id="children2"></div>
    		<div id="children3"></div>
    	</div>
    </div>

## 1. js获取元素子节点 ##

*  #### `通过dom的方式直接获取节点` ####

父节点ID为target，有两个字节点，获取target下所有字节点

const childrens = document.getElementById('target').getElementTagName('div');

得出的childrens是一个数组，数组中的元素是target下的子节点。

*  #### `通过childNodes获取子节点` ####

childNodes返回的是子节点的集合，是一个数组形式。

const childrens = document.getElementById('target').childNodes;

*  #### `通过children获取子节点` ####

同样会返回一个以子节点为元素的数组

const childrens = document.getElementById('target').children;

*  #### `通过firstElementChild获取第一个子节点` ####

const children = document.getElementById('target').firstElementChild;

*  #### `通过lastChild(lastElementChild)获取最后一个子节点` ####

const children = document.getElementById('target').lastChild;
    const children = document.getElementById('target').lastElementChild;

## 2. js获取元素父节点 ##

*  #### `通过parentNode获取父节点` ####

获取目标元素的`直接父元素`

const father = document.getElementById('target').parentNode;

*  #### `通过parentElement获取父节点` ####

获取目标元素的`直接父元素`,和parentNode一样。但是parentElement是IE标准

const father = document.getElementById('target').parentElement;

*  #### `通过offsetParent获取所有父节点` ####

获取目标元素的所有父节点，直接能够获取到所有父亲节点， 这个对应的值是body下的所有节点信息

const fathers = document.getElementById('target').offsetParent;

## 3. js获取元素兄弟节点 ##

*  #### `通过父节点获取兄弟节点` ####

const brother1 = document.getElementById('children1').parentNode.children[1];

*  #### `通过previousSibling， previousElementSibling获取上一个兄弟节点` ####

previousSibling会匹配字符，包括换行和空格，而不是节点。previousElementSibling则直接匹配节点。

const brother1 = document.getElementById("children2").previousElementSibling;
    const brother2 = document.getElementById("children2").previousSibling;

*  #### `nextSibling和nextElementSibling获取下一个兄弟节点` ####

同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是类似的。

const brother1 = document.getElementById("children2").nextElementSibling;
    var brother2 = document.getElementById("children2").nextSibling;

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS获取DOM节点的N种方式

** 目录** > 1 document.getElementById() > > 2 document.getElementsByClassName(); > ...

梦里梦外;/ 2024年04月18日 11:06/ 0 赞/ 104 阅读

相关 react ref获取dom节点

在React中，可以使用ref来获取DOM节点的引用。以下是一些示例代码，说明如何使用ref来获取DOM节点：使用React.createRef()（React 16.3版

逃离我推掉我的手/ 2024年02月29日 00:44/ 0 赞/ 90 阅读

相关 js进行Dom操作获取指定的兄弟类型节点

//获取指定的兄弟类型节点 //currentObj：当前节点，type：类型，如p标签，input标签等，如果是p标签，则传'p'，皆同理 funct

曾经终败给现在/ 2023年06月12日 04:21/ 0 赞/ 30 阅读

相关 JS获取DOM节点

<div id ="father"> <div id='target'> <div id="children1"></div> <di

爱被打了一巴掌/ 2023年06月11日 04:23/ 0 赞/ 5 阅读

相关 JS获取元素节点和子节点的三种方法(dom查询)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

深藏阁楼爱情的钟/ 2023年01月20日 15:58/ 0 赞/ 342 阅读

相关 Dom 获取节点方法

节点的分类：元素节点 html标签 img body input div 文本节点文字部分

怼烎@/ 2023年01月05日 05:26/ 0 赞/ 214 阅读

相关 JS中获取以及操作DOM中的节点

获取DOM中节点 > 节点的作用：节点是描述页面中每一部分之间的关系的。所以我们就要通过相关的属性和方法获取到页面中所有的节点。 childNodes > 获取当

小咪咪/ 2022年06月05日 01:15/ 0 赞/ 285 阅读

相关 JS中DOM的节点

node：节点浏览器认为在HTML页面中所有的内容都是节点（包括标签、注释、文本、文档等）。元素节点：HTML标签文本节点：文字内容（高版本浏览器中会把空

一时失言乱红尘/ 2022年06月05日 01:15/ 0 赞/ 243 阅读

相关 js dom-node节点选择

dom node 一切皆节点(对象、属性、空文本、文本、注释) 通用属性 .nodeName

Dear 丶/ 2021年07月25日 01:33/ 0 赞/ 434 阅读

相关 taro 获取dom节点信息

直接在生命周期函数中获取值为null 方式一:再加个延迟200毫秒的函数获取 1、创建选择器 const query = Taro

拼搏现实的明天。/ 2021年07月24日 16:54/ 0 赞/ 1988 阅读