DOM获取

最新推荐文章于 2024-11-09 13:50:59 发布

原创最新推荐文章于 2024-11-09 13:50:59 发布 · 666 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM

Javascript/Jquery 专栏收录该内容

7 篇文章

订阅专栏

本文通过实例解析HTML DOM结构，展示如何使用JavaScript获取DOM元素、判断子节点、获取属性、创建新节点及使用innerHTML的方法。

1.

<html>
<head>
<title>dom</title>
<script>
function searchDom()
{
	var oLi = document.getElementsByTagName("li");
	alert(oLi.length+" "+oLi[0].tagName+" "+oLi[3].childNodes[0].nodeValue);
	var oUl = document.getElementsByTagName("ul");
	var oLi2 = oUl[1].getElementsByTagName("li");
	alert(oLi2.length+" "+oLi2[0].tagName+" "+oLi2[1].childNodes[0].nodeValue);
}

</script>

</head>
<body onload="searchDom()">
	<ul>客户端语言
		<li>HTML</li>
		<li>JS</li>
		<li>CSS</li>
	</ul>
	<ul>服务器端语言
		<li>ASP</li>
		<li>JSP</li>
		<li>PHP</li>
	</ul>
</body>
</html>

上面代码结果为6 LI ASP

3 LI JSP

2.判断是否有子节点可以使用
oLi.hasChildNodes()
3.根据dom对象获取属性，oLi.getAttribute("title");
4.创建新节点
var op = document.createElement("p");
var text = document.createTextNode("我是中国人");
op.appendChild(text);
document.body.append(op);
5.innerHTML的使用
var myDiv = document.getElementById("aaa");
myDiv.innerHTML会输出所有该节点下的内容，包括代码标签
也可以直接进行写操作，比如：myDiv.innerHTML = "<img src="11.jpg"/>";