DOM和获取元素

最新推荐文章于 2024-08-15 18:19:19 发布

cai05

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量1k

点赞数 25

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/cai05/article/details/140062029

版权

DOM概念讲解

什么是DOM

DOM(文档对象模型)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。

W3C DOM提供了一套用于HTML和XML文档的标准对象以及访问这些文档的标准接口(方法)

DOM与具体的编程语言无关，可以在C、JavaScript、ActionScript、Java等语言中实现

DOM可分为三个部分：

核心DOM：是用于XML(XML可以自定义标签用于网页的数据传输)与HTML的共用接口（方法）；（操作节点树，如创建，删除，查找等）

XML DOM：XML专用接口其实就是DOM进行增强加入了一些适用于自己的接口

HTML DOM：HTML专用接口其实就是DOM进行增强加入了一些适用于自己的接口 (HTML DOM适合操作属性，如读取或修改属性的值)

节点树

HTML文档是一种树状的结构化文档、各标记之间是一种树状的层次关系

节点：

由结构图中我们可以看到，整个文档就是一个文档节点。 document

而每一个HTML标签都是一个元素节点。 element

标签中的文字则是文本节点(回车，空格也是文本节点)。Text

标签的属性是属性节点。 Attribute

一切都是节点…… Node

DOM 是针对xml(html)的基于树的API。

DOM树：节点（node）的层次。

DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

获取元素节点6种方式

getElementById()：通过id获取元素（标签）

语法结构：

document.getElementById("ID名")；

document:文档对象

get:获取

Element：元素

By:通过什么方式

注意：id 在页面是唯一，通过id获取的元素只有一个

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
        <div id = "box">
            div元素
        </div>
        <script type = "text/javascript">
        	var box = document.getElementById("box");
            console.log(box);
        </script>
    </body>
</html>

getElementsByTagName():通过标签名获取

语法结构：

objDOM.getElementsByTagName("标签名");

Elements:获取元素有多个

TagName:标签名（元素名）

注意：通过标签名获取的结果是一个伪数组

获取某个范围A内的元素B：先获取范围A 再到A下面获取B

获取到的伪数组不能直接使用，必须要精确到里面的元素才能使用

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  		    <p>这是段落</p>
        	<p>这是段落</p>
        	<p>这是段落</p>
        	<p>这是段落</p>
        	<p>这是段落</p>
        <script type = "text/javascript">
        	var pele = document.getElementsByTagName("p");
            console.log(pele);
        </script>
    </body>
</html>

获取某个范围A内的元素B：先获取范围A 再到A下面获取B

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <div id = "box1">
            <p>这是段落1</p>
        	<p>这是段落1</p>
        	<p>这是段落1</p>
        	<p>这是段落1</p>
        	<p>这是段落1</p>                              
        </div>
        <div id = "box2">
            <p>这是段落2</p>
        	<p>这是段落2</p>
        	<p>这是段落2</p>
        	<p>这是段落2</p>
        	<p>这是段落2</p>                              
        </div>
        <script type = "text/javascript">
            var box = document.getElementById("box1")
        	var pele = box.getElementsByTagName("p");
            console.log(pele);
        </script>
    </body>
</html>

getElementsByClassName():通过类名获取元素

语法结构：

objDOM.getElementsByClassName("类名");

document：整个文档下获取

Elements:获取元素有多个

ClassName:类名

注意：class在js中是关键字类名通常使用className代替

通过类名获取元素的方法：兼容性（在IE9以下不兼容）

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
        <script type = "text/javascript">
            var box = document.getElementsByClassName("box");
            console.log(box);
        </script>
    </body>
</html>

获取box2下面类名为pox的元素

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
       <div class = "box">这是div元素</div>
        <div id = "box1">
            <p class = "pox">这是段落元素1</p>
            <p class = "pox">这是段落元素1</p>
            <p class = "pox">这是段落元素1</p>
            <p class = "pox">这是段落元素1</p>
            <p class = "pox">这是段落元素1</p>
        </div>
        <div id = "box2">
            <p class = "pox">这是段落元素2</p>
            <p class = "pox">这是段落元素2</p>
            <p class = "pox">这是段落元素2</p>
            <p class = "pox">这是段落元素2</p>
            <p class = "pox">这是段落元素2</p>
        </div>
        <script type = "text/javascript">
            var box2 = document.getElementById("box2");
            console.log(box2);
            var box = box2.getElementsByClassName("pox");
            console.log(box);
        </script>
    </body>
</html>

getElementsByName()：通过name属性获取元素针对表单控件（input select textarea button）

语法：

document.getElementsByName("name值");

注意：结构只能在文档对象（document）下面获取

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	   <form action = "a" id = "myform">
           <input type = "radio" name = "sex">男
           <input type = "radio" name = "sex">女
        </form>
        <script type = "text/javascript">
            var sex = document.getElementsByName("sex");
            console.log(sex);
        </script>
    </body>
</html>

querySelector()：

语法：

document.querySelector("选择器")//返回页面中的第一个元素

选择器：

id:#id名

类名：.类名

标签名：标签名

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	           <div>111</div>
        	   <div>222</div>
        	   <div>333</div>
        	   <div>444</div>
        	   <div>555</div>
        <script type = "text/javascript">
            var first = document.querySelector("div");
            console.log(first);
        </script>
    </body>
</html>

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	           <div>111</div>
        	   <div>222</div>
        	   <div>333</div>
        	   <div>444</div>
        	   <div>555</div>
        		<p class = "a">段落1</p>
                <p class = "a">段落2</p>
                <p class = "a">段落3</p>
        		<p class = "a">段落4</p>
        		<p class = "a">段落5</p>
        <script type = "text/javascript">
            var first = document.querySelector("div");
            console.log(first);
            var first1 = document.querySelector("a");
            console.log(first1);
        </script>
    </body>
</html>

querySelectorAll()：

语法：

document.querySelectorAll("选择器")//返回页面中所有匹配元素组成的伪数组

选择器：

id:#id名

类名：.类名

标签名：标签名

<!Doctype html>
<html>
    <head>
        <title></title>
        <meta charset = "utf-8">
    </head>
    <body>
  	           <div>111</div>
        	   <div>222</div>
        	   <div>333</div>
        	   <div>444</div>
        	   <div>555</div>
        		<p class = "a">段落1</p>
                <p class = "a">段落2</p>
                <p class = "a">段落3</p>
        		<p class = "a">段落4</p>
        		<p class = "a">段落5</p>
        <script type = "text/javascript">
            var first = document.querySelectorAll("div");
            console.log(first);
            var first1 = document.querySelectorAll(".a");
            console.log(first1);
        </script>
    </body>
</html>