DOM的一些小示例

最新推荐文章于 2024-07-21 14:30:00 发布

jhlovett

最新推荐文章于 2024-07-21 14:30:00 发布

阅读量78

点赞数

分类专栏： Javascript 文章标签： JavaScript ASP.net ASP CSS PHP ViewUI

Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
//document.getElementsByTagName();
function SearchDom(){
	//得到该页面中所有li标签的对象数组
	var oli=document.getElementsByTagName("li");
	//数组长度,第一个对象的标签名,第四个对象的文本节点的值.
	alert("长度:"+oli.length+" 标签名:"+oli[0].tagName+" 第四个li元素的子节点的值:"+ oli[3].childNodes[0].nodeValue);
	var oul=document.getElementsByTagName("ul");
	var ol2=oul[1].getElementsByTagName("li");
	alert("长度:"+ol2.length+"标签名:"+oli[1].tagName+" 第二个元素的文本节点值:"+ol2[1].childNodes[0].nodeValue);
}
</script>
</head>
<body οnlοad="SearchDom()">
<ul>客户端语言
<li>HTML</li>
<li>Javascript</li>
<li>Css</li>
</ul>
<ul>服务端语言
<li>asp.net</li>
<li>jsp</li>
<li>php</li>
</ul>
</body>
</html>



<script type="text/javascript">
//document.getElementById();
function SearchDom(){
	var myid=document.getElementById("myid");
	alert(myid.tagName+" "+myid.childNodes[0].nodeValue);
}
</script>
</head>
<body οnlοad="SearchDom()">
<ul>客户端语言
<li>HTML</li>
<li>Javascript</li>
<li id="myid">Css</li>
</ul>
<ul>服务端语言
<li>asp.net</li>
<li>jsp</li>
<li>php</li>
</ul>
</body>
</html>





<script type="text/javascript">
/*父子关系:在访问元素之后Dom提供给我们最重要的一种关系,它可以通过某一个元素遍历其他元素*/
/*在DOM模型中只要获得了某一个元素,便可以通过父子关系,遍历整个HTML文档,通过DOM我们对文档拥有空前的控制能力*/
function MyDOMInspector(){
	var str="";
	var myList=document.getElementById("myList");
	if(myList.hasChildNodes())
		var child=myList.childNodes;
		for(var i=0;i<child.length;i++)
		str+=child[i].childNodes[0].nodeValue+"\n";
		//str+=child[i].tagName+"\n";
		//str+=child[i].nodeName+"\n";
		alert(str);
}
</script>
</head>
<body οnlοad="MyDOMInspector()">
<ul id="myList">
<li>苹果</li>
<li>香蕉</li>
<li>菜牙</li>
<li>橘子</li>
<li>西瓜</li>
<li>草莓</li>
</ul>
</body>
</html>




<script type="text/javascript">
/*节点属性*/
function property(){
	var img=document.getElementsByTagName("img")[0];//都打该页面的第一个图片标签的DOM对象
	alert(img.getAttribute("title"));
}
</script>
</head>
<body οnlοad="property()">
<img title="情人坡"  src="file:///D|/我的文档/My Pictures/Sunset.jpg"/>
</body>
</html>



<script type="text/javascript">
/*创建新节点*/
function createP(){
	var newP=document.createElement("p");
	var text=document.createTextNode("这是一段感人的故事!");
	newP.appendChild(text);
	document.body.appendChild(newP);
}
</script>
</head>
<body οnlοad="createP()">
<p>事先写一行文字在这里!</p>
</body>
</html>


<script type="text/javascript">
/*InnerHTML点*/
function test(){
	var mydiv=document.getElementById("mydiv");
	alert(mydiv.innerHTML);
	mydiv.innerHTML="<span>你是小白!</span>"
}
</script>
</head>
<body οnlοad="test()">
<div id="mydiv">
我是呆瓜!
</div>
</body>
</html>

jhlovett

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM的一些小示例

&lt;script type="text/javascript"&gt;//document.getElementsByTagName();function SearchDom(){ //得到该页面中所有li标签的对象数组 var oli=document.getElementsByTagName("li"); //数组长度,第一个对象的标签名,第四个对象的文本节点的值....
复制链接

扫一扫

专栏目录