javascript06_DOM-优快云博客

本文详细介绍了DOM操作的基础知识，包括如何通过ID、名称和标签名选取元素，并演示了如何获取元素的文本内容、节点名称和类型等。此外，还介绍了如何通过DOM遍历获取指定元素及其子元素。
13.简单DOM
<script type="text/javascript">
function getPwd(){
//DOM中的第一个常用方法是getElementById(),表示通过ID来获取某个特定标签,获取的是一个值 
	var pwd=document.getElementById("pwd");
	//alert(pwd.value);
	var pc=document.getElementById("showPwd");
	pc.innerHTML=pwd.value;
}
function getUsers(){
//getElementsByName,根据标签的name属性来获取一组标签对象,这个方法一般只用于表单的获取
	var users=document.getElementsByName("users");
	//alert(users.length);
	for(var i=0;i<users.length;i++){
		alert(users[i].value);
	}
}
function getInputs(){
/*getElementsByTagName根据标签的名称获取一组元素,这个非常有用,
 	一般用于获取html的各种标签,以此完成各种操作
 	一共能获取页面的10个元素 */
	var is=document.getElementsByTagName("input");
	for(var i=0;i<is.length;i++){
		alert(is[i].value);
	}
}
</script> 
</head>
<body>
<input type="text" name="users"/><br>
<input type="text" name="users"/><br>
<input type="text" name="users"/><br>
<input type="text" name="users"/><br>
<input type="text" name="users"/><br>
<input type="text" name="users"/><br>
<br>
<input type="password" id="pwd"/><br>
<br>
<input type="button" value="获取users" onclick="getUsers()"/>
<input type="button" value="获取pwd" onclick="getPwd()"/>
<input type="button" value="获取input" onclick="getInputs()"/>
<br>
<div id="showPwd"></div>
</body>

14DOM
<script type="text/javascript">
function getAllH1(){
	var ah=document.getElementsByTagName("h1");
	for(var i=0;i<ah.length;i++){
		//获取节点中的文本内容 
		//alert(ah[i].innerHTML);
		//获取节点的名称 
		//alert(ah[i].nodeName);
		//获取节点的类型 
		//alert(ah[i].nodeType);
		//获取节点中的值:节点中的值只是在针对文本节点时有用,以下为null
		//alert(ah[i].nodeValue);
		//获取某个节点的文本节点 
		//alert(ah[i].firstChild.nodeType);
		/*获取某个文本节点的值,但IE和firefox空白处理不一致,
		IE仅仅把换行当做空格,firefox所有的都为空格
		所以在获取文本节点后都需要去除空格*/
		alert("|"+ah[i].firstChild.nodeValue+"|");
	}
}


function getConH2(){
	var con=document.getElementById("content");
	var h2=con.getElementsByTagName("h2");
	//得到的h2元素是一个数组,
	//alert(h2[0].innerHTML);
	//通过h2这个节点来找到h3中span的值 
	//1.通过h2找到父节点 
	var pn=h2[0].parentNode;
	//2.通过父节点找到名称为h3的节点
	var h3=pn.getElementsByTagName("h3")[0];
	//3.通过h3找到span
	var s=h3.getElementsByTagName("span")[0];
	alert(s.innerHTML);
}
</script> 
</head>
<body>
<div id="content">
	<h1>aaaaa1
		<span>aaaaaaasssss</span>
	</h1>
	<h2>bbbbbb1
		<span>bbbbbbbsssss</span>
	</h2>
	<h3>cccccc1
		<span>ccccccccsssss</span>
	</h3>
</div>
<h1>hhhhhhhaaaaa1
	<span>hhhhhaaaaaaasssss</span>
</h1>
<h2>hhhhhbbbbbb1
	<span>hhhhhbbbbbbbsssss</span>
</h2>
<h3>hhhhhcccccc1
	<span>hhhhhccccccccsssss</span>
</h3>
<br>
<input type="button" onclick="getAllH1()" value="获取所有的h1"/><br>
<input type="button" onclick="getConH2()" value="获取content的h2"/><br>
</body>

15
<body>
<ul>
	<li>aaaaaaaaaaaaaaaa</li>
	<li>bbbbbbbbbbbbbbbb</li>
	<li>cccccccccccccccc</li>
	<li>dddddddddddddddd</li>
</ul>
<input type="button" value="点击一下" id="btn"/>
<script type="text/javascript">
	var btn=document.getElementById("btn");
/*可以通过如下方式来绑定事件,这样绑定事件,可以完成事件与html的解耦合操作 
在开发中通常使用这种方式来绑定事件,这个事件的处理函数中默认event的参数
用来获取相应的事件信息 */
	btn.onclick=function(event){
	/*特别注意:对于IE而言,不会自动传递event这个参数进去,
	IE需要通过window.event来获取事件,但firefox不支持这种方式 
	通常如下解决:*/
		event=event||window.event;
		//alert(window.event.type);
		alert(event.type);
		//this就表示这个按钮对象 
		alert(this.value);
	}
</script>
</body>

15event
<title>Insert title here</title>
<script type="text/javascript">
/*窗口加载完成之后执行init(),这样可以省略body中的onload
 * 所有如果希望使用如下的事件定义方法,需要先完成html信息的加载
 */
window.onload=init;
/*此时init()是在body  onload之后执行,即:在加载完所有页面标签之后执行init()
 * 此时节点就存在了 */
	function init(){
		alert("abc");
		var btn=document.getElementById("btn");
		/*如下绑定方式带来的最大问题是:如果将这段代码在header中定义,
		在执行到绑定事件之后,相应的html标签还没渲染出来,所以通过DOM
		得到的节点都是null,会报错,应该在页面加载完成之后再调用事件绑定代码 
		可以在body中通过onload事件来处理 */
		btn.onclick=function(event){
		/*特别注意:对于IE而言,不会自动传递event这个参数进去,
		IE需要通过window.event来获取事件,但firefox不支持这种方式 
		通常如下解决:*/
			event=event||window.event;
			//alert(window.event.type);
			alert(event.type);
			//this就表示这个按钮对象 
			alert(this.value);
		}
	}
</script>
</head>
<!-- <body onload="init()"> -->
<body>
<ul>
	<li>aaaaaaaaaaaaaaaa</li>
	<li>bbbbbbbbbbbbbbbb</li>
	<li>cccccccccccccccc</li>
	<li>dddddddddddddddd</li>
</ul>
<input type="button" value="点击一下" id="btn"/>

</body>

16event
<script type="text/javascript">
window.onload=init;
function init(){
	alert("1");
	//1.找到所有的li
	var lis=document.getElementsByTagName("li");
	//2.为所有的li绑定事件 
	for(var i=0;i<lis.length;i++){
		alert(2);
		lis[i].onmouseover=changColor;
		lis[i].onmouseout=reColor;
	}
}

function changColor(){
	this.style.color="#f00";
}
function reColor(){
	this.style.color="#000";
}
</script>
</head>
<body>
<ul>
	<li>aaaaaaaaaaaaaaaa</li>
	<li>bbbbbbbbbbbbbbbb</li>
	<li>cccccccccccccccc</li>
	<li>dddddddddddddddd</li>
</ul>
<input type="button" value="点击一下" id="btn"/>

</body>

18
function bless(){
	//获取输入的祝福语 
	var mb=document.getElementById("mb").value;
	//获取父类窗口 
	var p=window.opener;
	//获取父类窗口中的id为bless的div
	var pd=p.document.getElementById("bless");
	//设置pd的值 
	pd.innerHTML=mb;
	//关闭窗口 
	window.close();
}
转载于:https://my.oschina.net/686991/blog/355001