javascript学习笔记3：DOM操作之选取文档元素

一时失言乱红尘 2022-09-30 06:49 124阅读 0赞

*Element类型代表该文档中的一个元素；Document类型代表一个HTML或XML文档。Document和Element是两个重要的DOM类。*

文档节点部分层次结构：  
![这里写图片描述][SouthEast]  
*推荐个在线UML作图工具Process on，不要太好用，上图就是用它做的*

> [http://processon.com/][http_processon.com]

查询文档的一个或者多个元素：

*  用指定的id属性；
 *  用指定的name属性；
 *  用指定的标签名字；
 *  用指定的css类；
 *  匹配指定的css选择器；

--------------------

1.  通过id选取元素
    
    任何HTML元素可以有一个id属性，在文档中该值必须唯一，可以用Document对象的getElementById()方法选取一个基于唯一ID的元素。

var selector1 = document.getElementById("section1");

1.  通过名字选取元素
    
    类似id，name是给元素分配名字，但是区别于id，name属性的值不是必须唯一：多个元素可能有同样的名字。可以用Document对象的getElementsByName()方法。

var radiobuttons = document.getElementByName("favorite_color");
    //返回一个NodeList对象

1.  通过标签名选择元素  
    Document对象的getElementsByTagName()方法可用来获取指定标签名的所有HTML或XML元素。

//返回一个NodeList对象
    var spans = document.getElementsByTagName("span");
    
    //选取文档中的第一个<p>元素
    var para1 = document.getElementsByTagName("p")[0];
    
    //选取文档中第一个<p>元素中的所有<span>元素
    var paraSpan1 = para1.getElementByTagName("span");

1.  通过CSS类选取元素  
    zaiHTML文档上调用getElementsClassName()方法，他的返回值是NodeList对象。

//查找其class属性值包括warning的所有元素
     var warnings = document.getElementsClassName("warning");

1.  通过CSS选择器选取元素  
    元素可以用id、标签名或类来描述：

#nav    //id = "nav"的元素
    div     //所有<div>元素
    .warning //所有在class属性中包含了"warning"的元素

更一般的，元素可以基于属性值来选取：

p[lang = "fr"]  //<p lang="fr">
    *[name = "x"]   //所有包含name = "x"的元素

[SouthEast]: /images/20220708/8686caf1473a4625a2e09b6d4acba551.png
[http_processon.com]: http://processon.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript学习手册十四：HTML DOM——文档元素的操作（二）

HTML DOM——文档元素的操作 1.创建节点任务描述相关知识创建节点代码文件

超、凢脫俗/ 2023年01月16日 06:29/ 0 赞/ 103 阅读

相关 JavaScript学习手册十三：HTML DOM——文档元素的操作（一)

HTML DOM——文档元素的操作 1、通过id获取文档元素任务描述相关知识什么是DOM

谁践踏了优雅/ 2023年01月16日 06:26/ 0 赞/ 359 阅读

相关 javascript学习笔记3：DOM操作之选取文档元素

Element类型代表该文档中的一个元素；Document类型代表一个HTML或XML文档。Document和Element是两个重要的DOM类。文档节点部分层次结构：

一时失言乱红尘/ 2022年09月30日 06:49/ 0 赞/ 125 阅读

相关 JavaScript笔记：DOM2 & DOM3

DOM1主要定义的是HTML和XML文档的底层结构，DOM2 & DOM3则在这个结构的基础上引入了更多的交互能力。为此，DOM2、DOM3分为好多个模块，分别描述了DOM

「爱情、让人受尽委屈。」/ 2022年09月25日 15:21/ 0 赞/ 135 阅读

相关 JavaScript权威指南_114_第15章_脚本化文档_15.2-选取文档元素-通过name选取元素

![Center][] [Center]: /images/20220731/996acdbf36d1434db6897b29532ce2a6.png

ゞ浴缸里的玫瑰/ 2022年08月01日 15:54/ 0 赞/ 134 阅读

相关 Javascript学习笔记7 DOM2和DOM3

样式 style对象任何支持style特性的HTML元素在Javascript中都有个style属性。其包含着通过HTML的style特性指定的所有样式信息（不包

àì夳堔傛蜴生んèń/ 2022年05月29日 13:05/ 0 赞/ 172 阅读

相关 JavaScript DOM页面元素操作

DOM 页面元素操作 DOM（document object model）概念：文档：document，一个页面就是一个文档。也是页面的对象节点：页面的所

梦里梦外;/ 2022年05月13日 02:20/ 0 赞/ 256 阅读

相关学习笔记——JavaScript操作DOM

DOM的核心对象 /\Document对象及其方法\/ 只有Document对象的方法可以在页面上查找、创建、删除元素查找一个或多个元素

缺乏、安全感/ 2022年03月19日 09:50/ 0 赞/ 265 阅读

相关 Jquery 操作DOM元素（3）

> 相比于原生js，Jquery真的给了我们一些新的想法和途径去实现一些功能。关于Jquery dom的第三篇。代码如下，注释已写：（我博客上的代码基本上除了有其它关联文件

╰半夏微凉°/ 2022年03月17日 07:26/ 0 赞/ 252 阅读

相关 JavaScript 操作HTML DOM元素

DOM概念 DOM是文档对象模型的简称，全名为“Document Object Model”，通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

小灰灰/ 2021年09月14日 02:18/ 0 赞/ 584 阅读