DOM对象

小鱼儿 2022-11-19 04:12 181阅读 0赞

### 文章目录 ###

*  一、DOM对象模型
 *   *  1. 什么是DOM？
     *  2.Node节点
     *  3.访问元素属性
 *  二、练习

提示：以下是本篇文章正文内容，下面案例可供参考

# 一、DOM对象模型 #

## 1. 什么是DOM？ ##

**当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZGV0ZWN0aXZl_size_16_color_FFFFFF_t_70]  
**DOM树：**

## 2.Node节点 ##

**HTML中的所有内容都可以用节点（Node）来描述**  
节点共有12种类型，常见的节点类型有  
元素节点 elementNode  
属性节点 attributeNode  
文本节点 textNode

通过操作DOM树，JS可以实现：  
改变页面中任意的HTML元素  
改变页面中任意的HTML属性  
改变页面中任意的CSS样式  
删除页面中任意的HTML元素和属性  
添加任意的HTML元素和属性到页面中  
对页面中任意的事件做出响应  
对页面中的任意元素添加事件

**访问Node节点**

![在这里插入图片描述][2021041412163691.png]  
通过层级关系访问节点  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZGV0ZWN0aXZl_size_16_color_FFFFFF_t_70 1]  
**使用以上方法时要注意换行符、空白符等也是一个节点**

通过层级关系访问元素

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZGV0ZWN0aXZl_size_16_color_FFFFFF_t_70 2]

**每个Node节点包括如下属性  
节点类型 NodeType  
节点名 NodeName  
节点值 NodeValue**

访问节点文本内容的方法  
innerHTML （会返回所有的内部内容，包括子元素的标签）  
innerText  
textContent

## 3.访问元素属性 ##

通过element.属性名访问或通过element\[属性名\]访问（可使用变量）

<a id="app" class="text black large" href="1.html"></a>
    document.getElementsByTagName('a')[0].id //app
    document.getElementsByTagName('a')[0].href //完整路径
    document.getElementsByTagName('a')[0].className // 'text black large'
    document.getElementsByTagName('a')[0].classList //['text,'black','large']

# 二、练习 #

**创建获取按钮，点击该按钮后，按钮变为不可选状态（属性disabled=true），文本变为“获取中”，同时右侧出现10秒倒数，倒计时结束后按钮重新变为可选，文本变回“获取”，可再次点击**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<p id="p"></p>
    		<input type="button" id="btn" value="获取" onclick="aa()" />
    
    
    		<script type="text/javascript">
    			var data2;
    			var date3;
    			var stop;
    
    			function aa() {
        
    				data2 = new Date(1000 * 11)
    				date3 = data2.getSeconds();
    				stop = setInterval(function() {
        cc();}, 1000)
    			}
    
    			function cc() {
        
    				document.getElementById("btn").disabled = true;
    				document.getElementById("btn").value = "获取中";
    				var count = 0;
    				count++;
    				date3 = date3 - count;
    				document.getElementById("p").innerHTML = date3 + "秒后获取验证码";
    				if (date3 == 0) {
        
    					document.getElementById("btn").disabled = false;
    					document.getElementById("p").innerHTML = null;
    					clearInterval(stop);
    				}
    			}
    		</script>
    	</body>
    </html>

运行效果：  
![在这里插入图片描述][20210414130746963.png]  
![在这里插入图片描述][20210414130751113.png]

这个程序写的不是很好，请见谅。哈哈哈

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZGV0ZWN0aXZl_size_16_color_FFFFFF_t_70]: /images/20221022/805cdc98001a45f08a888405be3c04b9.png
[2021041412163691.png]: /images/20221022/452bc7c91d5441c7a1ee20d4f7916d10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZGV0ZWN0aXZl_size_16_color_FFFFFF_t_70 1]: /images/20221022/5c576e02fa1f4393ae740ae144a7551c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZGV0ZWN0aXZl_size_16_color_FFFFFF_t_70 2]: /images/20221022/f32f4aaf016f445fa2e61f0d1a9c7bde.png
[20210414130746963.png]: /images/20221022/80c7627efced4e73bd6b5a392ae75aa4.png
[20210414130751113.png]: /images/20221022/60bca48a1c58483484581e3fb883ec6d.png