选取文档元素的方法总结

在讲解如何选取文档元素之前,先普及一下什么是文档节点:

HTML文档的每个节点都表示一个Node对象,节点树形结构的根部是Document节点,代表整个文档,代表HTML元素的节点是Element节点,代表文本的节点是Text节点;Document、Element、Text类都是Node类的子类;(Comment节点类型代表注释节点,Attr节点类型代表属性)

查询一个或多个文档元素的方法:

(文档Document对象和元素Element对象均定义了以下方法,即也可以在一个元素Element上选择它的子元素)

一、用指定的id属性:document.getElementById(‘idName‘);

自定义一个工具函数同时选取多个元素:

function getElements(‘id1‘,‘id2‘,‘id3‘,......){

var elements = {};

for(var i = 0,len = arguments.length;i<len;i++){

var id = arguments[i];

var elt = document.getElementById(id);

if(elt == null){throw new Error(‘No element with id: ‘+id);}

elements[id] = elt;

}

return elements;

}

二、用指定的name属性:getElementsByName(‘name‘);返回一个包含若干Element对象的只读类数组对象NodeList对象,它同时也匹配具有和name同名的id属性的元素,所以不要将同一个字符串同时用于id属性和name属性;

虽然在用一个字符串给一个元素的id属性或name属性赋值时,这个字符串会自动的成为当前窗口对象的一个全局属性,即可以直接通过该属性名调用对应的元素,但最好显示的调用getElementsByName()来选取他们,因为该变量在日后可能会失效(当给窗口对象定义同名属性时)

三、用指定的标签名:getElementsByTagName(‘tagname‘);同样返回一个NodeList对象,该类数组对象中的元素是按所有该标签在文档中出现的顺序排序的,可通过索引来选取指定元素;

该方法不区分标签的大小写;

可使用‘*‘通配符来选取文档的所有元素;

可在指定Element对象上调用该方法,来选取它的子元素;

HTMLDocument类还指定了一些快捷属性,如:images、forms、links、anchors、embeds、plugins、scripts等,他们都指定HTMLCollection对象,它也是一个类数组对象,可以这样来选取他们的集合中的某一个元素document.forms[‘idname‘];或document.images[0];

HTMLDocument类还指定body、head属性,特指<body>和<head>元素,还有documentElement属性指文档的根元素<html>

NodeList和HTMLCollection对象通常是实时的,即当文档变化时它们所包含的元素列表能随之改变;最好使用for循环来遍历一个NodeList或HTMLCollection对象,而for..in循环会遍历到他们的length属性;

四、用指定的class属性:getElementsByClassName();基于其class属性值中的标识符来选取成组的文档元素,他也返回一个实时的NodeList对象

五、用指定的CSS选择器来匹配:(返回的是静态的NodeList对象)

querySelectorAll()根据一个包含CSS选择器的字符串,返回一个表示当前文档中匹配选择器的所有元素的NodeList对象,但该NodeList对象不是实时的,它只包含调用时刻所匹配到的元素,并不更新后续文档的变化,若找不到匹配则返回空的NodeList对象;

querySelector()只返回第一个匹配的元素对象(以文档顺序),若匹配不到则返回null

querySelector()、querySelectorAll()在元素Element对象上也有定义,在元素上调用它们时,先仍然在整个文档中匹配,然后再过滤出结果集以便它只包含该元素的后代元素;

querySelector()、querySelectorAll()在大多情况下不匹配伪元素,如:first-line  :first-letter :link :visited

时间: 2024-11-25 10:13:30

选取文档元素的方法总结的相关文章

JavaScipt选取文档元素的方法

摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选取文档元素的方法: 1.通过ID选取元素(getElementById)   1)使用方法:document.getElementById("domId")        其中,domId为要选取元素的id属性值   2)兼容性:低于IE8版本的IE浏览器对getElementById方法

JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setInterval()用来实现一个在指定毫毛数的时间里重复调用,返回一个值,这               个值可以传递给clearInterval()用于取消后续函数的调用. ③Document对象的location属性也引用到Location对象: window.location === docume

javascript选取文档元素

用指定的id属性 用指定的name属性 用指定的标签名字 用指定的CSS类 匹配指定的CSS选择器 通过ID选取元素 var section1 = document.getElementById("section1") 注意:在低于IE8版本的浏览器中,getElementById()对匹配元素的ID不区分大小写,而且也返回匹配name属性的元素. 通过名字选取元素 和id不一样的是name属性只在少数HTML元素中有效,包括表单.表单元素.<iframe>.<img

选取文档元素

getElementById 根据元素的id属性值,来选取元素,在低于IE8的浏览器中,id不区分大小写,并且对于某些元素也匹配它的name属性值. getElementsByName: 根据元素的name属性查找元素.在IE9以前的版本中,对于表单(form),表单元素(input area等),img,iframe等元素也会匹配对应的id值,为了兼容性,不应将同样的值同时分配给不同元素的id和name属性(id和name设置同样的值是没有问题的). 并且和window对象一样,其中设置了id

四.OC基础--1.文档安装和方法重载,2.self和super&amp;static,3.继承和派生,4.实例变量修饰符 ,5.私有变量&amp;私有方法,6.description方法

四.OC基础--1.文档安装和方法重载, 1. 在线安装 xcode-> 系统偏好设置->DownLoads->Doucument->下载 2. 离线安装 百度xcode文档 3. 方法重载: 是指在一个类中定义多个同名的方法 在OC中没有重载 2.self和super&static, self和super: 1. self理解: 谁调用当前方法, self就代表谁. 比如: 在对象方法中,self代表的是对象, 因为只有对象才可以调用对象方法 在类方法中, self代表的

利用js_API 执行对html文档元素的属性的CRUD操作

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对html元素属性的增删改查操作</title> <style> #attr{text-align:center;font-size:24px;color:white;background:#008000;width:400px;height:30px; } .myclass{back

VIM显示utf-8文档乱码解决方法

1.相关基础知识介绍 在Vim中,有四个与编码有关的选项,它们是:fileencodings.fileencoding.encoding和termencoding.在实际使用中,任何一个选项出现错误,都会导致出现乱码.因此,每一个Vim用户都应该明确这四个选项的含义.下面,我们详细介绍一下这四个选项的含义和作用. (1)encoding encoding是Vim内部使用的字符编码方式.当我们设置了encoding之后,Vim内部所有的buffer.寄存器.脚本中的字符串等,全都使用这个编码.Vi

IIS下不能下载文件的docx文档,XLSX文档的设置方法(转)

IIS下不能下载文件的docx文档,XLSX文档的设置方法 Office 2007的的界面风格默认格式中都是.DOCX,XLSX,PPTX等等后缀,连结中包含此类文件时,界面风格默认什么打不开的其实只要在IIS中的MIME的类型中添加对此格式的支持就可以了下面提供两种方法扩展功能,推荐使用第二种. 方法一:打开网站属性,的HTTP头选项对话牌,添加的MIME类型 新建一种类型,填入需要的 .docx ,类型为 application/vnd.openxmlformats-officedocume

第7章 文档元素

第 7 章文档元素 学习要点: 1.文档元素总汇 2.文档元素解析 本章主要探讨 HTML5中文档元素,文档元素的主要作用是划分各个不同的内容,让整 个布局清晰明快.让整个布局元素具有语义,进一步替代 div. 一.文档元素总汇 文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念. 元素名称  说明 h1~h6  表示标题 表示首部  header 表示尾部  footer 表示有意集中在一起的导航元素  nav 表示重要概念或主题  section 表示一段独立的内容