DOM，全称Document Object Model，即文档对象模型

最新推荐文章于 2022-10-07 12:40:44 发布

哦SuY

最新推荐文章于 2022-10-07 12:40:44 发布

阅读量311

点赞数

文章标签： css js javascript dom html

本文链接：https://blog.csdn.net/weixin_43755857/article/details/107314589

版权

DOM

上一篇: JavaScript基础知识
下一篇: BOM

1. 简介

全称Document Object Model，即文档对象模型。

DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

浏览器在解析HTML页面标记的时候，是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，组建好之后，按照树的结构将页面显示在浏览器的窗口中。

2. 节点层次

document 代表当前页面的整个文档树。

访问属性：
all
images
links

3. document入门

该对象代表整个文档页面

DOM(Document Object Model) 文档对象模型				

一个html页面被浏览器加载的时候，浏览器就会对整个html页面上的所有标签都会创建一个对应的对象进行描述，
我在浏览器上看到的信息只不过就是这些html对象的属性信息而已。我们只要能找到应的对象操作对象的属性，则可以改变浏览器当前显示的内容。

var allNodes = document.all;//获取当前页面所有标签对象
nodeName：节点名称

4. 根据HTML标签的属性找节点

document.getElementById(“div1”);//根据元素id属性值获取元素对
document.getElementsByClassName(“c1”); //根据元素class属性值获取元素对象的数组
document.getElementsByName(“p1”); //根据元素name属性值获取元素对象的数组
document.getElementsByTagName(“footer”); //根据元素标签名获取元素对象的数组
innerHTML 当前标签内所有的HTML内容，即下雨
innerText 当前标签内的文本内容

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>dom操作</title>
    	</head>
    	<body>
    		<div id="div1">
    			<span>下雨</span>
    		</div>
    		<button type="button" onclick="divChange()">id点我</button>
    		<hr />
    		
    		<span class="c1">长</span>
    		<span class="c1">叹息</span>
    		<span class="c1">以掩涕</span>
    		<span class="c1">兮</span>
    		<button type="button" onclick="classChange()">class点我</button>
    		<hr />
    		
    		<p name="p1">将进酒</p>
    		<p name="p1">杯莫停</p>
    		<p name="p1">李白</p>
    		<button type="button" onclick="nameChange()">name点我</button>
    		<hr />
    	
    		<footer>无意义标签</footer>
    		<footer>无意义标签</footer>
    		<footer>无意义标签</footer>
    		<button type="button" onclick="tagChange()">tag点我</button>
    		
    	</body>
    	<script>
    		/* 
    			dom document object model  文档对象模型
    			document.getElementById("div1");//根据元素id属性值获取元素对象
    			document.getElementsByClassName("c1"); //根据元素class属性值获取元素对象数组
    			document.getElementsByName("p1"); //根据元素name属性值获取元素对象数组
    			document.getElementsByTagName("footer"); //根据元素标签名获取元素对象数组
    			innerHTML  当前标签内所有的HTML内容，即<span>下雨</span>
    			innerText  当前标签内的文本内容
    		 */ 
    			
    		function divChange(){
    			// 根据元素id属性值获取元素对象
    			var div1 = document.getElementById("div1");
    			console.log(div1);
    			div1.innerHTML = "<span>没下雨</span>";
    		}
    		function classChange(){
    			var class1 = document.getElementsByClassName("c1");
    			console.log(class1);
    			// 更改class属性值为c1的span标签内容，及字体格式
    			for(var i=0;i<class1.length;i++){
    				console.log(class1);
    				class1[i].innerText = "哇哦";
    				//CSS  想使用CSS修饰元素，要使用  元素.style.css中的属性
    				//如果属性是两个单词的拼接，比如font-size、background-color
    				//style.属性  使用驼峰命名法  比如fontSize  backgroundColor
    				class1[i].style.color = "red";
    				class1[i].style.fontSize = "50px";
    			}
    		}
    		function nameChange(){
    			var names = document.getElementsByName("p1");
    			console.log(names);
    			for(var i=0;i<names.length;i++){
    				names[i].innerText = "李小白";
    				names[i].style.color = "green";
    				names[i].style.fontSize = "25px";
    				names[i].style.fontFamily = "楷体";
    			}
    		}
    		function tagChange(){
    			var tags = document.getElementsByTagName("footer");
    			console.log(tags);
    			for(var i=0;i<tags.length;i++){
    				tags[i].innerText = "呵呵呵";
    			}
    		}
    	</script>
    </html>

5. 动态创建标签

1.document.createElement(“div”); 创建元素
2.给元素设置CSS样式
3.body1.appendChild(div); 将动态创建的元素对象给需要的元素
4.div.setAttribute(“id”,“div1”); 给动态创建的元素进行属性的设置

      <!DOCTYPE html>
      <html>
      	<head>
      		<meta charset="utf-8">
      		<title>动态创建标签</title>
      	</head>
      	<body id="b1">
      		<!-- 
      			1.document.createElement("div"); 创建元素
      			2.给元素设置CSS样式
      			3.body1.appendChild(div);  将动态创建的元素对象给需要的元素
      			4.div.setAttribute("id","div1");  给动态创建的元素进行属性的设置
      		 -->
      		<script>
      			function test(){
      				var body1 = document.getElementById("b1");
      				//在body中创建一个div
      				var div = document.createElement("div");
      				console.log(div);
      				//加一些CSS样式
      				div.style.width = "200px";
      				div.style.height = "200px";
      				div.style.backgroundColor = "greenyellow";
      				
      				//给动态创建的元素进行属性的设置
      				div.setAttribute("id","div1");
      				div.setAttribute("class","classDiv");
      				
      				// 将动态创建的元素对象给需要的元素
      				body1.appendChild(div);
      			}
      			test();
      		</script>
      	</body>
      </html>