JavaScript：dom心得

最新推荐文章于 2022-05-27 21:43:57 发布

hejia729371286

最新推荐文章于 2022-05-27 21:43:57 发布

阅读量579

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/hejia729371286/article/details/50412411

版权

这篇博客介绍了HTML DOM，它是HTML的标准对象模型和编程接口，允许通过JavaScript访问、修改、添加或删除HTML元素。内容包括通过getElementById(), getElementsByTagName(), getElementsByClassName()方法访问节点，以及通过元素节点读写属性值和获取子节点的方法。" 122220353,9826393,STC15单片机串口通信：收发单个字符实战,"['自动化', '单片机', '串口通信']

摘要由CSDN通过智能技术生成

一、什么是 HTML DOM？

HTML DOM 是：

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

二、 HTML DOM 节点

因此：通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

正常的JavaScript的写法有如下三种：

1、这种方法使用于js不是很多得情况下使用，否则代码不好看，不好调试

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	
	<!-- HTML 代码和 JS 代码耦合在一起. -->
	<button οnclick="alert('helloworld...');">ClickMe</button>
	
</body>
</html>

2、由于html文档是从上到下编译的，所以如果把JavaScript放在head里面的话，可能执行时获取不到html里的对象属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

</head>
<body>
	
	<button>ClickMe</button>
	
</body>
</html>

<!-- 
	在整个 HTML 文档被加载后, 获取其中的节点. 
	把  script 节点放在 html 文档的最后 
	但不符合些 JS 代码的习惯. 
-->
<script type="text/javascript">
	
	//1. 获取 button
	var btns = document.getElementsByTagName("button");
	alert(btns.length);
	
	//2. 为 button 添加 onclick 响应函数
	btns[0].onclick = function(){
		alert("helloworld!!");
	}

</script>

例如：

<!DOCTYPE html>
<html>
<body>


<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>
</body>
</html>

结果为：

如果是这样的：

<!DOCTYPE html>
<html>
<body>
<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>


</body>
</html>

结果是：

3、

由于html文本在加载的时候会先调用window.οnlοad=function(){}方法，所以一