js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取

每个网页都是一个dom树，网页中所有的内容都是这个树上的一个节点。JavaScript的工作就是操作这些节点，对节点进行查增删改操作，或是给节点绑定事件。

网页

dom树

要操作dom节点，首先要获取到dom节点。这里我介绍几个原生js获取元素子节点的方法：

一、通过标签的属性值获取后代节点

以getElementBy开头的方法，可以根据具体的属性获取元素的后代节点。这些方法不只会获取子节点，他也会获取到所有符合条件的后代节点。

方法

依据属性

兼容性

其他

getElementById

兼容性好，推荐使用

如果存在多个id相同的元素，只会返回第一个

getElementsByTagName

标签名

不兼容ie8及以下版本

返回所有符合条件的元素的集合

getElementsByName

name

不兼容ie8及以下版本

返回所有符合条件的元素的集合

getElementsByClassName

class

不兼容ie8及以下版本

返回所有符合条件的元素的集合

以getElementById为例，尽管有两个id为’Jan‘的元素，但是只会获取到第一个：

varj=document.getElementById('Jan');

console.log(j);

需要注意的是，在同一个文件中出现重复id是不符合规范的，应当尽量避免这样使用。

如果将上面代码中的getElementById('Jan')换成 getElementsByTagName('p')或者是getElementsByClassName('test')将会获取到符合条件的结果集。

二、child属性

每个dom元素都是一个对象，在dom元素对象中有四个专门用于获取子元素的属性：

属性名

作用

其他

childNodes

获取所有子节点

不推荐使用，如果有空格，会作为文本节点获取到

child

获取所有子节点

推荐使用

firstChild

获取首个子节点

推荐使用

lastChild

获取最后一个子节点

推荐使用

这四个属性都不存在兼容性问题，除了childNodes之外都是比较好用的。

1. childNodes

childNodes属性可以获取元素的所有子节点，并封装到一个数组中，可以通过下标来获取某个子元素：

js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取相关推荐

js原生后代选择器_jQuery的后代选择器ancestor descendant介绍和示例解析
jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素内所有的descendant元素,将其封装为jQuery对象并返回. 注意:选择器descendan ...
js原生后代选择器_HTML5的JavaScript选择器介绍
在HTML5出现之前使用JavaScript查找DOM元素,有以下三种原生的方法: getElementById:根据指定元素的id属性返回元素 getElementsByName:返回所有指定nam ...
js原生后代选择器_js 后代选择器
CSS规范 - 命名规则使用类选择器,放弃ID选择器ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用.NEC特殊字符:"-"连字符"-"在 ...
js原生后代选择器_CSS 后代选择器
具体应用后代选择器的功能极其强大.有了它,可以使 HTML 中不可能实现的任务成为可能. 假设有一个文档,其中有一个边栏,还有一个主区.边栏的背景为蓝色,主区的背景为白色,这两个区都包含链接列表.不 ...
JS贪吃蛇小游戏(DOM (html+css+js))
游戏截图: html部分: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
JS 去除数组A中包含数组B中的元素（即：获取A数组中不包含B数组的元素）
let newArr = A.filter(function (item) {return B.every(function (item1) {return item.SPID != item1.SP ...
java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
js后代选择器_后代选择器和子元素选择器的区别
原文简书原文:https://www.jianshu.com/p/4a776598c69c 大纲 1.后代选择器和子元素选择器的相关概念 2.后代选择器和子元素选择器的区别 1.后代选择器和子元素选 ...

js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取

js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取相关推荐

最新文章

热门文章