javascript学习笔记3:DOM操作之选取文档元素
2017-03-19 18:51
696 查看
Element类型代表该文档中的一个元素;Document类型代表一个HTML或XML文档。Document和Element是两个重要的DOM类。
文档节点部分层次结构:
推荐个在线UML作图工具Process on,不要太好用,上图就是用它做的
http://processon.com/
查询文档的一个或者多个元素:
用指定的id属性;
用指定的name属性;
用指定的标签名字;
用指定的css类;
匹配指定的css选择器;
通过id选取元素
任何HTML元素可以有一个id属性,在文档中该值必须唯一,可以用Document对象的getElementById()方法选取一个基于唯一ID的元素。
通过名字选取元素
类似id,name是给元素分配名字,但是区别于id,name属性的值不是必须唯一:多个元素可能有同样的名字。可以用Document对象的getElementsByName()方法。
通过标签名选择元素
Document对象的getElementsByTagName()方法可用来获取指定标签名的所有HTML或XML元素。
通过CSS类选取元素
zaiHTML文档上调用getElementsClassName()方法,他的返回值是NodeList对象。
通过CSS选择器选取元素
元素可以用id、标签名或类来描述:
更一般的,元素可以基于属性值来选取:
文档节点部分层次结构:
推荐个在线UML作图工具Process on,不要太好用,上图就是用它做的
http://processon.com/
查询文档的一个或者多个元素:
用指定的id属性;
用指定的name属性;
用指定的标签名字;
用指定的css类;
匹配指定的css选择器;
通过id选取元素
任何HTML元素可以有一个id属性,在文档中该值必须唯一,可以用Document对象的getElementById()方法选取一个基于唯一ID的元素。
var selector1 = document.getElementById("section1");
通过名字选取元素
类似id,name是给元素分配名字,但是区别于id,name属性的值不是必须唯一:多个元素可能有同样的名字。可以用Document对象的getElementsByName()方法。
var radiobuttons = document.getElementByName("favorite_color"); //返回一个NodeList对象
通过标签名选择元素
Document对象的getElementsByTagName()方法可用来获取指定标签名的所有HTML或XML元素。
//返回一个NodeList对象 var spans = document.getElementsByTagName("span"); //选取文档中的第一个<p>元素 var para1 = document.getElementsByTagName("p")[0]; //选取文档中第一个<p>元素中的所有<span>元素 var paraSpan1 = para1.getElementByTagName("span");
通过CSS类选取元素
zaiHTML文档上调用getElementsClassName()方法,他的返回值是NodeList对象。
//查找其class属性值包括warning的所有元素 var warnings = document.getElementsClassName("warning");
通过CSS选择器选取元素
元素可以用id、标签名或类来描述:
#nav //id = "nav"的元素 div //所有<div>元素 .warning //所有在class属性中包含了"warning"的元素
更一般的,元素可以基于属性值来选取:
p[lang = "fr"] //<p lang="fr"> *[name = "x"] //所有包含name = "x"的元素
相关文章推荐
- javascript对文档对象模型DOM的基本操作学习笔记
- JavaScript DOM学习笔记5――创建和操作节点
- JavaScript学习笔记(09)之文档对象模型DOM
- [导入]JavaScript DOM笔记:获取及操作元素
- JavaScript DOM编程 学习笔记-获取元素节点
- JavaScript DOM笔记:获取及操作元素
- JavaScript DOM学习笔记5——创建和操作节点
- jQuery学习笔记(二)—— 操作DOM元素
- 【学习笔记】DOM Unit01-DOM概述 、 DOM树 、 选取元素
- 学习笔记(二):javascript之dom操作
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
- javascript 学习笔记(一)DOM基本操作
- javascript 学习笔记(一)DOM基本操作
- AJAX 学习笔记(5) 处理XML文档的DOM元素属性和遍历DOM元素方法
- JavaScript DOM编程 学习笔记-获取元素节点
- learning jQuery 学习笔记十三(+jQuery 1.4.1 API)-- DOM操作-基于命令改变页面 ----复制元素及其它
- 【jQuery学习笔记---------DOM操作复制元素】
- javascript dom 学习笔记 第九章:实现给某个元素添加加新的class的值的函数!
- JavaScript DOM笔记:获取及操作元素
- JavaScript DOM笔记:获取及操作元素