JavaScript DOM 2 - 获取文档元素 - 前端

1: 获取文档元素的方法有7个

1: getElementById(id) ［通过id获取］

2: getElementsByName(name) ［通过元素的name属性获取］

3: getElementsByTagName(tagName) ［通过Tag名字获取］

4: getElementsByTagNameNS(nameSpace, tagName) ［通过值得namSpace下的Tag名字获取］ 

5: getElementsByClassName(className)［通过元素CSS类名字获取］

6: querySelectorAll(cssQuery) ［通过匹配CSS选择器获取匹配的所有元素］

7: querySelector（cssQuery）［通过匹配CSS选择器获取匹配的第一个元素］

其中:

1: 在方法名上，除了ById是单数的'Element', 其他都是复数的'Elements'

2: 返回HTMLElement类型的有: 
    getElementById()
    querySelector()
    
3: 其余都是返回NodeList或者HTMLCollection

4: 同时定义在Document和Element上的方法有：
    getElementsByClassName()
    getElementsByTagName()
    getElementsByTagNameNS()
    querySelectorAll()
    querySelector()

先来对以上几点进行点直观的感受，假如我们的HTML代码是这样的：

<body>
    <h1 id='pageTitle'>item list</h1>
    <ul class='bookList'>
        <li class='bookItem'>book 1</li>
        <li class='bookItem'>book 2</li>
    </ul>
    <ul class='cats'>
        <li class='catItem'>Cat 1</li>
        <li class='catItem'>Cat 2</li>
    </ul>
</body>

1: 返回HTMLElement的nodeList的区别

图片描述

2: 同时定义在Document和Element上的方法区别

图片描述

bookItems是在Element元素(bookList[0])上使用getElementsByTagName()得到的结果，而allLi是在document上使用getElementsByTagName()得到的结果。可以看出在某个HTMLElement元素上使用获取dom元素的话，结果只会返回此元素的后代节点里满足查询条件的节点，而document上使用，会返回整个文档里面的满足查询条件的全部节点。
接下来对以上6个方法进行具体的讲解：

1: getElementById(id)

 var pageTitle = document.getElementById('pageTitle');

没什么好说的，传入元素id的值，返回HTMLElement。
浏览器特性：

1: 在低于IE 8浏览器中，getElementById()对id不区分大小写。
2: 在低于IE 8浏览器中，也返回匹配name属性的元素。

2: getElementsByName(name)

var elements = document.getElementsByName('xxx');

通过元素的name属性选取元素，返回NodeList对象，包含若干Element对象的只读数组

<select>
    <option name='type'> type 1</option>
    <option name='type'> type 2</option>
    <option name='type'> type 3</option>
</select>

图片描述

特别注意：

1: getElementsByName()定义在HTMLDocument类中，而不是Document类中，所以只能在HTML文档可以用，在XML文档里不可以用。
2: 在IE中此方法也返回id属性匹配的元素
3: 为某些HTML元素设置name属性，会在Document对象上设置同名的属性（如果此属性名不存在）

针对以上第3点解释一下：

<form name='infoForm'></form>
<img src="" name='logo'>
<img src="" name='logo'>

图片描述

我们为HTML里面的元素设置其name属性，但是在document上自动创建了以name的值为名字的属性：infoForm和logo，所以可以通过document.infoForm和document.logo取值而这些属性对应的值为：

1: 如果HTML里面只有一个标签的name是这个值，那通过document.属性取值，返回单个HTMLElement对象；

2: 如果有多个元素的name为同一个值，那就返回包含这些元素的NodeList对象。

3: getElementsByTagName(tagName)

var spanElements = document.getElementsByTagName('span');

传入tag的名称，递归地获取匹配的元素，先看一段代码

<span class='spanParent'>
    parent
    <span class='spanChild'>child</span>
</span>
<span class="spanSibling">Sibling</span>

图片描述

从返回结果的NodeList对象的元素顺序来看，它会递归地把某个节点都查询完，然后再去查询它的兄弟节点。返回的结果是一个被拍平的一维数组，不会因为HTML的递归结构而得到多维数组。
特别注意：

1: 因为HTML不区分大小写，所以这个方法对tag名也不区分大小写，就是说如果查询‘span’,同时也会匹配‘<SPAN>’元素
2: 如果传入通配符'*',会获得一个代表真哥哥文档中元素的NodeList对象。例如：

图片描述

4: getElementsByClassName(className)

var elements = document.getElementsByClassName('red');

通过匹配元素的class的值来获取元素。参数为包含全部class值的字符串(class前面不加'.')，当某个元素的class值有多个时，参数用空格隔开。

<p class="red"></p>
<p class="red bold"></p>
<p class="red bold small"></p>

图片描述

可以看到查询结果不包含第一个<p>元素，因为它的class里面没有‘bold’;结果包含第三个<p>元素，因为它的class包含参数里面的所有class名，即使它自己本身还多出一个别的class。所以这是一个“包含全部”而不是“完全相等“的查询。

5: querySelectorAll(cssQuery)

var elements = document.querySelectorAll(‘.bookList li’);

参数为一个字符串，内容为和CSS语法一样的，css选择器(通过'.', '#'等来区分是class还是id之类的值)。结果返回NodeList对象

<ul class='bookList'>
    <li class='bookItem'>book 1</li>
    <li class='bookItem'>book 2</li>
</ul> 
<ul class='cats'>
    <li class='cattem'>cat 1</li>
    <li class='catItem'>cat 2</li>
</ul>

图片描述

其实很类似于jQuery的选择元素的方法，而querySelectorAll()也是解决获取页面元素的终极方法。

6: querySelector(cssSelector)

var element = document.querySelector('.red');

它的用法与querySelectorAll()相似，但是有两个区别：

1: querySelector()只返回匹配的第一个元素
2: querySelector()返回结果为HTMLElement, 而不是一个包含一个元素的NodeList对象

JavaScript DOM 2 - 获取文档元素

nanaistaken

引用和评论

[TypeScript] keyof

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号