javascript dom查找元素常用方法

标签：style   javascrip   code   stc   css   order   注意   class   select   

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）

遍历节点数

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 属性: 节点的类型，是只读的。以下常用的几种结点类型:

javascript dom查找元素常用方法

标签：style   javascrip   code   stc   css   order   注意   class   select   

原文地址：https://www.cnblogs.com/wuanyun/p/11141896.html