JavaScript DOM 2 - 获取文档元素

sydMobile 发布于2019-08-21 15:55 / 1878人阅读

摘要：在低于浏览器中，也返回匹配属性的元素。例如通过匹配元素的的值来获取元素。结果返回对象其实很类似于的选择元素的方法，而也是解决获取页面元素的终极方法。

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代码是这样的：


    item list
    
        book 1
        book 2
    
    
        Cat 1
        Cat 2

1: 返回HTMLElement的nodeList的区别

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

bookItem是在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对象的只读数组

特别注意：

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

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

在document上自动创建了以name的值为名字的属性：‘logo’和‘infoForm’。如果HTML里面只有一个元素的name是这个值，那通过document的属性去取值，返回这个HTMLElement对象；如果有多个元素的name是这个值，那就返回包含这些元素的NodeList对象。

3: getElementsByTagName(tagName)

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

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


    parent
    child

Sibling

从返回结果的NodeList对象的元素顺序来看，它会递归地把某个节点都查询完，然后再去查询它的兄弟节点。
特别注意：

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

4: getElementsByClassName(className)

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

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

可以看到查询结果不包含第一个

元素，因为它的class里面没有‘bold’;结果包含第三个

元素，因为它的class包含参数里面的所有class名，即使它自己本身还多出一个别的class。所以这是一个“包含全部”而不是“完全相等“的查询。

5: querySelectorAll(cssQuery)

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

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


    book 1
    book 2
 

    cat 1
    cat 2

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

6: querySelector(cssSelector)

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

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88308.html

Javascript学习总结 - JS基础系列二

摘要：假如对应的为一组对象，则返回该组对象中的第一个。方法返回带有指定标签名的节点对象的集合。语法说明是标签的名称，如等标签名。是一个人的身份证号码，是唯一的。注意把指定的属性设置为指定的值。表示文档所在窗口的当前宽度。简述本系列将持续更新Javascript基础部分的知识，谁都想掌握高端大气的技术，但是我觉得没有一个扎实的基础，我认为一切高阶技术对我来讲都是过眼云烟，要成为一名及格的前...

pcChao 2019-08-19 17:08 评论0 收藏0
JavaScript学习总结（三）BOM和DOM详解

摘要：有级级级共个级别。事件类型事件类型鼠标事件键盘事件事件事件处理器执行代码的程序在事件发生时会对事件做出响应。在标签中使用事件处理器的语法是标签事件处理器代码事件处理程序事件就是用户或浏览器自身执行的某种动作。 DOM介绍 D（文档）可以理解为整个Web加载的网页文档，O（对象）可以理解为类似window对象只来的东西，可以调用属性和方法，这里我们说的是document对象，M（模型）可...

littlelightss 2019-08-21 12:27 评论0 收藏0
说说JavaScript中DOM的Node对象

摘要：对象对象的概念首先了解一下对象怎么用。对象是解析节点树结构的主要入口。继承链关系对象是继承于对象的，是一个用于接收事件的对象。代码示例的标准规范中的对象和对象都是继承于对象的。属性对象的属性用于获取指定的节点名称。参数表示要删除的节点。 Node对象 Node对象的概念首先了解一下Node对象怎么用。DOM的标准规范中提供了Node对象，该对象主要提供了用于解析DOM节点树结构的属性...

Batkid 2019-08-23 11:39 评论0 收藏0
回到基础：理解 JavaScript DOM

摘要：事件处理允许对事件做出反应。还可以用代码为多个元素分配相同的事件。指定事件监听器接下来看看怎样为元素分配事件监听器。翻译：疯狂恶的技术宅https://medium.freecodecamp.o... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章 Javascript DOM（文档对象模型）是一个允许开发人员操纵页面内容、结构和风...

wemallshop 2019-08-23 16:30 评论0 收藏0
高性能JavaScript阅读简记（二）

摘要：访问集合元素时使用局部变量对于任何类型的访问，如果对同一个属性或者方法访问多次，最好使用一个局部变量对此成员进行缓存。三、DOM Scripting DOM编程我们都知道对DOM操作的代价昂贵，这往往成为网页应用中的性能瓶颈。在解决这个问题之前，我们需要先知道什么是DOM，为什么他会很慢。 DOM in the Browser World 浏览器中的DOM DOM是一个独立于语言...

RaoMeng 2019-08-01 17:20 评论0 收藏0