DOM基础

Myth丶恋晨 2023-07-17 14:02 3阅读 0赞

# DOM查找 #

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

## JavaScript DOM基础 ##

DOM是Document Object Model（文档对象模型）的缩写  
文档对象模型（DOM）是HTML和XML文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方法可以使从程序中对该机构进行访问，从而改变文档的结构、样式和内容

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

## DOM查找方法 1 ##

语法：

document.getElementById("id")

功能：

返回对拥有指定ID的第一个对象的引

返回值：

DOM对象

说明：

id为DOM元素上的id属性的值

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

## DOM查找方法 2 ##

语法：

document.getElementsByTagName("tag")

功能：

返回一个对所有tag标签引用的集合

返回值：

数组

说明：

tag为要获取的标签名称

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

### 选择练习 ###

关于dom的查找方法，下列选项中说法正确的是？（选择两项）

**A** getElementByTagName（）方法返回带有指定标签名的所有元素，返回的是一个元素  
**B** getElementsByTagName（）方法返回带有指定标签名的所有元素，返回的是元素的集合  
**C** getElementById（）方法返回带有指定 ID 的元素  
**D** getElementsById（） 方法返回带有指定 ID 的元素

**正确答案： B,C**  
参考解析：  
该题考察的是dom的查找方法，正确选项为BC；  
A：getElementsByTagName（）方法返回带有指定标签名的所有元素，返回的是元素的集合，可以通过下标的方式去获取每个元素。  
D：getElementById() 方法返回带有指定 ID 的元素，Element没有s。

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

### 编程练习 1 ###

通过ID选取的方法获取到html文件中的div元素，并让它们依次的在页面中弹出！

#### 任务 ####

第一步：通过ID选取的方法（getElementById( )）获取到每个div，并用变量进行接收。  
第二步：当打开页面时，依次弹出这几个变量

#### 任务提示 ####

注意，通过alert弹出的内容是对象，不是具体的值  
也可以通过console.log（）输出一下

#### 参考代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>DOM的查找方法</title>
    	</head>
    	<body>
    		<div id="div1">第一个元素</div>
    		<div id="div2">第二个元素</div>
    		<div id="div3">第三个元素</div>
    		<script> div1=document.getElementById("div1"); div2=document.getElementById("div2"); div3=document.getElementById("div3"); alert(div1); alert(div2); alert(div3); console.log(div1); console.log(div2); console.log(div3); </script>
    	</body>
    </html>

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

### 编程练习 2 ###

依次弹出“前端书籍”中的每一项，并在最后弹出它的列表项总共有几项。

#### 任务 ####

完成以下步骤：  
第一步：通过ID获取到“前端书籍”所在的列表项  
第二步：再通过标签名获取所有的列表项li，注意这里得到的是一个数组  
第三步：依次弹出“前端书籍”的每一项，也就是li中的每一项，弹出的每一项其实是一个dom对象，不是具体的值  
第四步：最后弹出前端书籍共有多少本

#### 任务提示 ####

获取到的数组，下标是从0开始的，在输出是第几本书的时候，记得下标+1。

#### 参考代码 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>1-4</title>
    	</head>
    	<body>
    		<h3>前端书籍</h3>
        	<ul id="listWeb">
    			<li>htmll基础</li>
    			<li>CSS基础</li>
    			<li>JavaScript基础</li>
    			<li>Jquery框架</li>
    			<li>bootStrap框架</li>
    		</ul>
    		<h3>JAVA书籍</h3>
    		<ul id="listJava">
    			<li>JAVA语言基础</li>
    			<li>三大框架</li>
    			<li>JAVA深入浅出</li>
    		</ul>
    		<script> list=document.getElementById("listWeb").getElementsByTagName("li"); for(var i=0;i<list.length;i++){ alert("前端书籍第"+(i+1)+"本："+list[i]); } alert("前端书籍共计"+list.length+"本"); </script>
    	</body>
    </html>