JS---DOM：Document Object Model 文档对象模型（Document、Element、Node）

最新推荐文章于 2021-02-09 09:59:14 发布

qiudonga

最新推荐文章于 2021-02-09 09:59:14 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 JavaScript 文章标签： Document Element Node

本文链接：https://blog.youkuaiyun.com/qq_42488087/article/details/98666792

前端同时被 2 个专栏收录

11 篇文章

订阅专栏

JavaScript

6 篇文章

订阅专栏

本文深入讲解了Document Object Model（DOM）的基本概念，包括其主要功能和组成部分，如Document、Element和Node等对象的使用方法。重点介绍了如何通过DOM进行HTML文档的动态操作，如元素的获取、创建、删除及内容修改。

JS—DOM：Document Object Model 文档对象模型（Document、Element、Node）

DOM有什么功能？

将标记语言文档的各个组成部分封装为对象，可以使用这些对象，对标记语言进行 CRUD 的动态操作。

DOM标准被分为3个不同的部分

【1】核心 DOM:针对任何结构化文档的标准模型

【2】XML DOM:针对XML文档的标准模型（这里不介绍）

【3】HTML DOM 针对 HTML文档的标准模型（XML DOM和HTML DOM是基于核心DOM的扩展）

核心DOM ：针对任何结构化文档的标准模型包括六大对象(以下是在html DOM模型中的方法)

【1】Document:文档对象,在html dom模型中可以使用window对象来获取

window.document  获取 document

方法：

获取tElement对象

1.getElementById():查找具有指定唯一id的元素

var light = document.getElementById("_id");   //获取id为“_id”的元素对象

2.getElementsByTagName():根据元素名称获取元素对象们，返回值是一个数组

var h1 = document.getElementsByTagName("h1");
alert(h1);

3.getElementsByClassName():根据Class属性值获取元素对象们，返回值是一个数组

4.getElementsByName():根据name属性值获取元素对象们，返回是一个数组

创建其他DOM对象:

1.createAttribute(); //设置属性

ele_a.setAttribute("href","javascript:void(0);");

2.createComment()

3.createElement():创建html元素

var td_a = document.createElement("td");

4.createTextNode()：创建文本内容

var text_a = document.createTextNode("删除");

【2】Element:元素对象

获取：通过document对象来获取

var light = document.getElementById("_id");   //获取id为“_id”的元素对象

方法：

removeAttribute():删除属性

setAttribute();设置属性

修改属性值：（属性值不全自行查看w3school API）

1.修改图片路径:src

<body>
    <img id="_id" src="img/a.jpg.jpg" />
<script>
    var light = document.getElementById("_id");
    alert("我要换图片了");
    light.src="img/b.jpg.jpg";
</script>
</body>

改变标签里的内容

1.innerHTML

<body>
    <h1 id="title">图片</h1>
<script>
    var title = document.getElementById("title");
    alert("我要换标题了");
    title.innerHTML = "赵丽颖";
</script>
</body>

【3】Attribute:属性对象(不重要，自行API)

【4】Text:文本对象(不重要，自行API)

【5】Comment:注释对象(不重要，自行API)

【6】Node:节点对象，上述五个的父对象

方法：1.removeChild():删除子节点（下面代码实现了点击超链接删除子节点div2）

<body>
    <div id="div1">父节点
		<div id="div2">
    		子节点
		</div>		
	</div>
<!--javascript:void(0)功能是阻止超链接跳转或刷新-->
<a href="javascript:void(0)" id="del">删除子节点</a> 
<script>
    var del = document.getElementById("del");   
	del.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);    //删除div1的子节点div2
	}
</script>
</body>

2.appendChild():添加子节点（如下实现了向div1中添加子节点div3）

<body>
		<div id="div1">父节点	
		</div>
		<a href="javascript:void(0)" id="add">添加子节点</a>		
	<script>
		var add = document.getElementById("add");
		add.onclick = function(){
    		var div1 = document.getElementById("div1");
   			 //创建div3节点
        	var div3 = document.createElement("div");
    		div3.setAttribute("id","div3");  //设置属性——id为div3
    		div1.appendChild(div3);  //向div1中添加子节点div3
		}
    </script>
</body>

属性：parentNode：返回当前节点的父节点

var  div2 = document.getElementById("div2");
var div1 = div2.parentNodel;           //获取div2的父节点

HTML DOM:

innerHTML属性：可以替换或追加文本(非常重要！！！！)

替换文本内容

<div id="div1">
    div
</div>
<script>
    var div = document.getElementById("div1");
	div.innerHTML = "你好";
</script>

追加文本

<div id="div1">
    div
</div>

<script>
    var div = document.getElementById("div1");
	div.innerHTML += "你好";
</script>

控制元素样式：

方式1. 使用style属性 div1.style后跟css样式及属性

<script>
    var div1 = document.getElementById("div1");
	div1.onclick = function(){
    div1.style.border = "1px solid red";
    div1.style.width = "200px";
    div1.fontSize = "200px";   //如果css是font-size的样式，就把-去掉，首字母大写
	}
</script>

方式2：提前设置好样式，通过className直接赋值一个样式

<head>
    <meta charset="UTF-8">
<style>
        .id{
            border: 1px solid red;
        }
</style>
</head>
<body>
    <div id="div2">
        div
	</div>

<script>
        var div2 = document.getElementById("div2")
		div2.onclick = function(){
    	div2.className = "id";
		}
</script>
</body>