今日内容概要：

Javaweb崔希凡---day4---Javascript---DOM
1、案例一：在末尾添加节点

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">
	div{
		width:200px;
		height:200px;
		border:2px solid red;
	}
  </style>
 </head>
 <body>
 <div>
	<ul id="ulid">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
</div>
<div id="div1">

</div>
	<br/>
	<input type="button" value="add" onclick="add2();"/>
	<script type="text/javascript">
		function add2() {
			var div1 = document.getElementById("div1");
			var ul1 = document.getElementById("ulid");
			div1.appendChild(ul1);
		}

		//在末尾添加节点
		function add1() {
			//获取到ul标签
			var ul1 = document.getElementById("ulid");
			//创建标签
			var li1 = document.createElement("li");
			//创建文本
			var tex1 = document.createTextNode("5555");
			//把文本加入到li下面
			li1.appendChild(tex1);
			//把li加入到ul下面
			ul1.appendChild(li1);
		}
		
	</script>

 </body>
</html>

2、元素对象（element对象）
Javaweb崔希凡---day4---Javascript---DOM

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<input type="text" name="name1" id="inputid" value="aaaa"/>

	<script type="text/javascript">
		//先要获取input标签
		var input1 = document.getElementById("inputid");
		//alert(input1.value);
		//alert(input1.getAttribute("value"));
		//alert(input1.class);
		//alert(input1.getAttribute("class"));

		///alert(input1.getAttribute("class"));

		input1.setAttribute("class","haha");

		///alert(input1.getAttribute("class"));

		alert(input1.getAttribute("value"));
		input1.removeAttribute("value");
		alert(input1.getAttribute("value"));
		
	</script>

 </body>
</html>

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>

	<ul id="ulid">
		<li id="li1">qqqqq</li>
		<li id="li2">wwww</li>
		<li id="li3">yyyyyy</li>
		<li id="li4">test1111</li>
	</ul>

	<script type="text/javascript">
		
		//得到li1
		/*var li1 = document.getElementById("li1");
		//得到ul
		var ul1 = li1.parentNode;
		alert(ul1.id);*/

		//获取ul的第一个子节点 id=li1
		//得到ul
		var ul1 = document.getElementById("ulid");
		//第一个子节点
		/*var li1 = ul1.firstChild;
		alert(li1.id);*/

		//得到最后一个子节点
		/*var li4 = ul1.lastChild;
		alert(li4.id);*/

		//获取li的id是li3的上一个和下一个兄弟节点
		var li3 = document.getElementById("li3");
		//alert(li3.nextSibling.id);
		alert(li3.previousSibling.id);
		
	</script>

 </body>
</html>

3、Node对象属性一
Javaweb崔希凡---day4---Javascript---DOM

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
	<span id="spanid">哈哈呵呵</span>

	<script type="text/javascript">
		//获取标签对象
		var span1 = document.getElementById("spanid");
		//alert(span1.nodeType);   //  1
		///alert(span1.nodeName);   // SPAN
		///alert(span1.nodeValue);  // null

		//属性
		var id1 = span1.getAttributeNode("id");
		//alert(id1.nodeType);  // 2
		//alert(id1.nodeName);  // id
		//alert(id1.nodeValue); // spanid

		//获取文本
		var text1 = span1.firstChild;
		alert(text1.nodeType);  //  3
		alert(text1.nodeName);  // #text
		alert(text1.nodeValue); // 内容

	</script>

 </body>
</html>

4、Node对象的属性二
Javaweb崔希凡---day4---Javascript---DOM

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>

	<ul id="ulid">
		<li id="li1">qqqqq</li>
		<li id="li2">wwww</li>
		<li id="li3">yyyyyy</li>
		<li id="li4">test1111</li>
	</ul>

	<script type="text/javascript">
		
		//得到li1
		/*var li1 = document.getElementById("li1");
		//得到ul
		var ul1 = li1.parentNode;
		alert(ul1.id);*/

		//获取ul的第一个子节点 id=li1
		//得到ul
		var ul1 = document.getElementById("ulid");
		//第一个子节点
		/*var li1 = ul1.firstChild;
		alert(li1.id);*/

		//得到最后一个子节点
		/*var li4 = ul1.lastChild;
		alert(li4.id);*/

		//获取li的id是li3的上一个和下一个兄弟节点
		var li3 = document.getElementById("li3");
		//alert(li3.nextSibling.id);
		alert(li3.previousSibling.id);
		
	</script>

 </body>
</html>

Javaweb崔希凡---day4---Javascript---DOM

今日内容概要：

相关推荐