js 获取 dom 节点的方法

js 获取节点的方式

将要获取的节点

html 代码

<div id="idname"></div>

<div class="classname" id="div1"></div>

<div class="classname" id="div2"></div>

<div class="classname" id="div3"></div>

<form action="" name="form1"></form>

<form action="" name="form1"></form>

<form action="" name="form2"></form>

通过 getElementxxxx 方法获取

   document.getElementById('idname')
   //通过 id 进行获取 获取的结果是一个 dom 节点,只返回一个元素
   
   document.getElementsByClassName('classname')
   //通过类名进行获取 返回一个 HTMLCollection(类数组) 数据结构,如果需要其中的某一个 dom 节点,则需要通过下标进行获取
   
   document.getElementsByName('form1')
   //通过 tag 获取 返回一个 HTMLCollection(类数组) 数据结构 如果需要获取 divList2 中的某一项，则通过下标获取
   
   document.getElementsByTagName('div')
   //返回一个 NodeList(类数组) 数据结构 如果需要获取 divList3 中的某一项，则通过下标获取 
   

通过其他方式获取

document.querySelector('.classname')
document.querySelectorAll('.classname')

/*
这两个也是获取标签的方法,参数都为选择器(css3中支持的选择器都可以)

第一个获取到选择器选中的第一个元素,
在这里会获取到第二个 div 这个 dom 节点

第二个获取到所有的选择器选中的元素,
结果也是一个 NodeList 类数组,需要通过下标来获取具体的某一项,
这里获取到的是所有有类名为 classname 的所有 dom 节点
*/

注意: querySelector 和 querySelectorAll 这两个函数有局限性,不能够获取到动态添加的节点只能获取 html 中的静态节点

通过属性获取

/* 快速获取 html 标签 */
console.log('html:', document.documentElement);
/* 快速获取 body 标签 */
console.log('body:', document.body);

/* 快速获取表单 */
console.log('forms:', document.forms);    //forms: HTMLCollection(2) [form, form, form1: form]
//通过下标访问第几个表单

/* 给表单添加 name 属性后，快速获取某个具体的表单 */
console.log('forms:', document.form1);     //forms: HTMLCollection(2) [form, form, form1: form]
console.log('forms:', document.form2);    //forms: <form action name=​"form2">​</form>​