domノードを取得するためのjsメソッド

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 节点
*/

注：2つの関数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>​