解析HTML DOM API在网页中的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/hi_beijing/article/details/84319778

本文深入探讨了HTML DOM API在网页开发中的应用，包括节点操作、样式获取、内容修改、元素添加与移除等核心功能。通过具体代码示例，详细解释了如何利用这些API实现动态网页交互与布局调整。

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

<!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>
<style>
#d1{width:500px;  }
#d2,#d3,#d4,#d5,#d6,#d7,#d8,#d9,d10
{
	width:500px;
	height:30px;
	background-color:#dedede;	
}
.ss
{
	border:1px solid red;	
}
</style>
<body>
<div id="d1">
	<div id="d2">1text</div>
    <div id="d3">2</div>
    <div id="d4">3</div>
    <div id="d5">4</div>
    <div id="d6">5</div>
    <div id="d7">6</div>
    <div id="d8">7</div>
</div>
<script>
var d1 = document.getElementById("d1");
document.write("d1的个数IE支持d1.childNodes.length：" + d1.childNodes.length+"<br/>");
document.write("d1的个数Firefox chrome opera safari支持d1.childElementCount：" + d1.childElementCount+"<br/>");
document.write("d1的第一个元素的内容IE：" + d1.firstChild.innerText+"<br/>");
document.write("d1的第一个元素的内容Firefox chrome opera safari：" + d1.firstElementChild.textContent+"<br/>");
document.write("d1的最后一个元素的内容IE：" + d1.lastChild.innerText+"<br/>");
document.write("d1的最后一个元素的内容Firefox chrome opera safari：" + d1.lastElementChild.textContent+"<br/>");
document.write("d1的第三个元素的内容IE：" + d1.childNodes[2].innerText+"<br/>");
document.write("d1的第三个元素的内容Firefox chrome opera safari：" + d1.children[0].textContent+"<br/>");
document.write("以上Webkit o不兼容<br/>");
document.write("d1的第三个元素的下一个元素的内容：" + d1.childNodes[2].nextSibling.innerText+"<br/>");
document.write("d1的第三个元素的上一个元素的内容：" + d1.childNodes[2].previousSibling.innerText+"<br/>");
document.write("d1的第三个元素的下一个元素的内容：" + d1.childNodes[2].nextSibling.textContent+"<br/>");
document.write("d1的第三个元素的上一个元素的内容：" + d1.childNodes[2].previousSibling.textContent+"<br/>");
document.write("d1的第一个元素的名称：" + d1.nodeName+"<br/>");
document.write("d1的第一个元素的类型：" + d1.nodeType+"<br/>");
document.write("以上FF不兼容<br/>");
document.write("d1添加属性：" + d1.setAttribute("class","ss")+"<br/>");
document.write("d1获取属性：" + d1.getAttribute("class")+"<br/>");
var d9 = document.createElement("div");
d9.className="d9";
d9.innerHTML="8";
d9.setAttribute("id","d9");
d9.style.fontSize="20px";
d9.style.backgroundColor="red";
var d10 = document.createElement("div");
d10.setAttribute("id","d10");
d10.innerHTML="9";
document.write("d1添加一个元素：" + d1.appendChild(d9)+"<br/>");
document.write("d1替换一个元素：" + d1.replaceChild(d10,d9)+"<br/>");
document.write("d1删除一个元素：" + d1.removeChild(d10)+"<br/>");


</script>
总结：
IE支持的API                          FF Safari Opera Chrome支持
Element.childNodes.length           Element.children.length(支持所有浏览器百标准) or Element.childElementCount
Element.firstChild                  Element.firstElementChild
Element.lastChild	                Element.firstElementChild
Element.innerText(只有FF不支持)      Element.textContent
所有浏览器都技术的API
innerHTML            
Element.childNodes[0] 
Element.nextSibling
Element.previousSibling
Element.nodeName
Element.nodeType
document.createElement("元素");
setAttribute()
getAttribute()
appendChild()
replaceChild("新创建的元素对象","替换的元素对象")
removeChild()


</body>
</html>

脚本化文档DOM之二