Js HTML DOM-优快云博客

本文链接：https://blog.youkuaiyun.com/apity123/article/details/67637258

本文介绍了如何使用JavaScript通过DOM来改变HTML内容、属性及样式，并演示了如何创建、插入和删除HTML元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.DOM简介

当网页被加载时，浏览器会创建页面的文档对象模型（document object model）

HTML DOM模型被构造为对象的树

通过可编程的对象模型，js可以:

1)改变页面中的所有HTML元素

2)改变页面中的所有HTML属性

3)改变页面中的所有CSS样式

4)对页面中的所有事件做一反应

查找HTML元素

1)get通过id查找html元素

var x=document.getElementById("index");

2)通过标签名查找html元素

var y=x.getElementsByTagName("p");

3)通过类名查找html：ie9以下不支持

var y=x.getElementsClassName("");

2.改变HTML

改变HTML输出流

document,write(Date());

改变HTML内容

document，getElementById("p1").innerHTML=" ";

改变HTML属性

document.getElementById("image").src="lab.jpg";

3.改变CSS

改变HTML样式

document.getElementById ("p2").style.color="blue";

4.DOM节点

创建新的HTML元素

var para=document.creatElement("p");

var node=document.creatTextNode("新的节点”）;

para,appendChild(node);

var element=document.getElementById("div1");

element.appendChild(Para);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body id="div1">
	<script>
		var para=document.createElement("div");
		var node=document.createTextNode("段落");
		para.appendChild(node);
		var element=document.getElementById("div1");
		element.appendChild(para);
 	</script>  
 </body>
</html>

删除已有的HTML元素

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent,removeChild(child);

找到父节点，然后删除子节点

-？能否不引用父元素而删除某个元素

var child =document.getElementById("p1");

child.parentNode.removeChild(child);