22网页前端javascript——DOM、_基于javascript dom技术的网站前端开发-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41167340/article/details/82219992

博客主要介绍了DOM，它是针对HTML和XML文档的API应用程序接口，呈现层次化节点树，可操作页面部分。还提及w3c提供定位节点的方法和属性，针对获取不到id的问题给出解决办法，最后阐述了DOM在元素节点属性、HTML属性及节点创建、复制等方面的操作。

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

一：DOM

1：DOM的介绍：文档对象模型，针对html和xml文档的API应用程序接口。dom秒回了一个层次化的节点树，运行开发人员添加、移除、修改页面的某一部分。

2：查找元素：

w3c 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。分别为：

方法	说明
getElementById（）	获取特定ID元素的节点
getElementByTagName（）	获取相同元素的节点列表
getElementByName（）	获取相同名称的节点列表
getAttribute（）	获取特定元素节点属性的值
setAttribute（）	设置特定元素节点属性的值
removeAttribute（）	移除特定元素节点属性

问题1：获取不到id：

解决1：script 放到下面：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>

</head>

<body>
<div id="ad">
	dom
</div>
<script>
	var ad=document.getElementById("ad");
	alert(ad);
	
	</script>

</body>
</html>

解决2：采用延时加载：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
<script>
	//页面加载延时方式：
	window.onload=function()
	{
		var ad=document.getElementById("ad");
	    alert(ad);
	}
	</script>
</head>

<body>
<div id="ad">
	dom
</div>
</body>
</html>

具体操作：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM</title>
<script>
	//页面加载延时方式：
	window.onload=function()
	{
		var ad=document.getElementById("ad");
	     alert(ad);
		var ae=document.getElementsByTagName("li").length;//获取相同元素的列表
	     alert(ae);
		var af=document.getElementsByName("txt");
		alert(af);
		var ad=document.getElementById("ad").getAttribute("name");//获取出来id为“ad”的name名称
		alert(ad);
		var ak=document.getElementById("ad").setAttribute('style','color:red');//设置id为“ad”的格式
        var am=document.getElementById("ad").removeAttribute('style');
	}
	
	</script>
</head>

<body>
<div id="ad" name="div的名字">
	dom
</div>
<ul>
	<li>1</li>
	<li>2</li>
</ul>
<input type="text" name="txt">
</body>
</html>

3：节点操作：

A。元素节点属性

属性	说明
tagName	获取元素节点的标签名
innerHTML	获取元素节点里的内容，非w3c DOM规范

B。 HTML属性的属性

属性	说明
id	元素节点的id名称
title	元素节点的title属性值
style	css内联样式属性值
className	css元素的类

C。 DOM不单单可以查找节点，也可以创建节点，复制节点，插入节点，删除节点，替换节点

方法	说明
write()	这个方法可以把任意字符串插入到文档中
creatElement（）	创建一个元素节点
appendChild（）	将新节点追加到子节点列表的末尾
creatTextNode（）	创建一个文件节点
insertBefore（）	将新节点插入在前面
cloneNode（）	复制节点
removeChild（）	移除节点
replaceChild（）	将新节点替换旧节点

	window.onload=function(){
		//---------------------------元素节点属性------------------------
		var ad=document.getElementById("ad").tagName;//获取id为“ad”的标签名
		var ad=document.getElementById("ad").innerHTML;//获取id为“ad”的具体内容
		alert(ad);
		//---------------------------HTML的属性--------------------------
		var ae=document.getElementById("ad").title='biao';//设置id为ad的 title标题
		var ae=document.getElementById("ad").style.color='red';
		alert(ae);
		//-------------------------------创建节点--------------------------
		document.write('hello,my name is zhangsan');
		var p =document.createElement('p');
		var box =document.getElementById('ad');
		box.appendChild(p);

	}