js-DOM控制HTML

一、 dom对象控制html
   HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。
   HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。
   通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
   HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。
       getElementByName()            -获取name
       getElementByTagName()        -获取元素
       getAttribute()                -获取元素属性
       setAttribute()                -设置元素属性
       childNodes()                -访问子节点
       parentNode()                -访问父节点
       createElement()            -创建元素节点
       createTextNode()            -创建文本节点
       insertBefore()                -插入节点
       removeChild()                -删除节点
       offsetHeight()                -网页尺寸（不包含滚动条）
       scrollHeight()                -网页尺寸（包含滚动条）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom对象控制html</title>
	</head>
	<body>
		<p name="pn">hello</p>
		<p name="pn">hello</p>
		<p name="pn">hello</p>
		<a href="#" id="aid" title="得到了a标签的属性">hello</a>
		<a href="#" id="aid2">world</a>
		<ul><li>1</li><li>2</li><li>3</li></ul>
		<div id="div">
			<p id="pid">hello</p>
		</div>

		<script type="text/javascript">
			function getName(){
				var count = document.getElementsByTagName("p");
				alert(count.length);
				var p = count[2];
				p.innerHTML = "world";
			}
			//getName();

			function getAttr(){
				var anode = document.getElementById("aid");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			//getAttr();

			function setAttr(){
				var anode = document.getElementById("aid2");
				anode.setAttribute("title","动态设置a标签的属性;即修改a标签的属性");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			//setAttr();

			function getChildNodes(){
				var childnode = document.getElementsByTagName("ul")[0].childNodes;
				alert(childnode.length);
				alert(childnode[0].nodeType);
			}
			//getChildNodes();

			function getParentNodes(){
				var div = document.getElementById("pid");
				alert(div.parentNode.nodeName);
			}
			//getParentNodes();

			function creatNode(){
				var body = document.body;
				var input = document.createElement("input");
				input.type = "button";
				input.value = "按钮";
				body.appendChild(input);
			}
			creatNode();

			function addNode(){
				var div = document.getElementById("div");
				var node = document.getElementById("pid");
				var newnode = document.createElement("p");
				newnode.innerHTML = "动态添加第一个p元素";
				div.insertBefore(newnode,node);
			}
			//addNode();

			function removeNode(){
				var div = document.getElementById("div");
				var p = div.removeChild(div.childNodes[1]);
			}
			removeNode();

			function getSize(){
				var width = document.documentElement.offsetWidth||document.body.offsetWidth;
				var height = document.documentElement.offsetHeight||document.body.offsetHeight;
				alert(width+","+height);
			}
			getSize();
		</script>

	</body>
</html>

二、 DOM操作元素的属性

<a id="aid" href="http:www.baidu.com">baidu</a>
<button onclick="demo()">anniu</button>
<script>
	function demo(){
	document.getElementById("aid").href="http:www.jikexueyuan.com";
	}
</script>

<img id="aid" src="21CN.jpg"/>
<button onclick="demo()">anniu</button>
<script>
	function demo(){
		document.getElementById("aid").src="36Kr.jpg";
	}
</script>

三、DOM操作改变CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM操作改变CSS</title>
		<style type="text/css">
			#div1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<p>hello world</p>
		</div>
		<button onclick="demo()">anniu</button>
		<script type="text/javascript">
			function demo(){
				var chang=document.getElementById("div1").style.background="blue";
			}
		</script>
	</body>
</html>

四、DOM EventListener

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM EventListener</title>
	</head>
	<body>
		<button id="btn">anniu</button>
		<script type="text/javascript">
//			document.getElementById("btn").addEventListener("click",function(){
//				alert("hello");
//			});
			var x=document.getElementById("btn");
			x.addEventListener("click",hello);				//向指定元素添加句柄
			x.addEventListener("click",world);				//句柄可以添加多个，且不会覆盖
			x.removeEventListener("click",hello);			//移除添加的句柄
			function hello(){
				alert("hello");
			}
			function world(){
				alert("world");
			}
		</script>
	</body>
</html>

巴特西

js-DOM控制HTML

最新文章

热门文章