javascript dom查找元素常用方法

Posted wuanyun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript dom查找元素常用方法相关的知识,希望对你有一定的参考价值。

1.按id查找

document.getElementById();

支持:所有主流浏览器

 

2.按标签名查找

document.getElementsByTagName();//标签名;Elements加了S,选出来是类数组;

支持:所有主流浏览器

 

3.按name属性查找

document.getElementsByName();//name属性,部分标签可以;Elements加了S,选出来是类数组;

支持:所有主流浏览器

 

4.按class属性查找

document.getElementsByClassName();//class;Elements加了S,选出来是类数组;IE9以下不支持;

支持: IE9+

 

5.1 按选择器选择(返回文档中匹配指定选择器的一个元素)

document.querySelector();

支持: IE8+

 

5.2 按选择器选择(返回返回所有的元素)

document.querySelectorAll() 

支持: IE8+

 

5.3 选择器参数(CSS选择器:https://www.runoob.com/cssref/css-selectors.html

参数 类型 描述
CSS 选择器 String

必须。指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。

 

遍历节点数

parentNode //父级元素,顶级父级元素为document;
childNodes //子节点们
firstChild //第一个子节点
lastChild //最后一个子节点
nextSibling //后一个兄弟节点
previousSiling //前一个兄弟节点

备注:注意子节点,不仅仅包括元素节点,文本、注释等都属于节点;

 

基于元素遍历节点树

parentElement   //(IE9及以下版本不支持)
children  
nextElementSibling  // (IE9及以下版本不支持)
previousElementSibling   //(IE9及以下版本不支持)
firstElementChild  //(IE9及以下版本不支持)
lastElementChild  // (IE9及以下版本不支持)

备注:除了children,其他几个IE9以下版本不支持;

 

补充节点知识:

1.在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型 (重点属性,重点学习)

 

一、nodeName 属性: 节点的名称,是只读的。

1. 元素节点的 nodeName 与标签名相同

2. 属性节点的 nodeName 是属性的名称

3. 文本节点的 nodeName 永远是 #text

4. 文档节点的 nodeName 永远是 #document

 

二、nodeValue 属性:节点的值

1. 元素节点的 nodeValue 是 undefined 或 null

2. 文本节点的 nodeValue 是文本自身

3. 属性节点的 nodeValue 是属性的值

 

三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:

元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

以上是关于javascript dom查找元素常用方法的主要内容,如果未能解决你的问题,请参考以下文章

jQuery之常用DOM操作

DOM 常用操作之“查找”

javascript中常用的事件绑定方法

JavaScript中,有三种常用的绑定事件的方法

Javascript - ExtJs - 常用方法和属性

Javascript-DOM笔记