JavaScript DOM对象控制HTML元素详解

Posted 2020-07-31

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM对象控制HTML元素详解相关的知识，希望对你有一定的参考价值。

一、DOM对象控制HTML

1.方法：

getElementsByName() 获取name

getElementsByTagName() 获取元素

getAttribute() 获取元素属性

setAttribute() 设置元素属性

childNodes() 访问子节点

parentNode() 访问父节点

createElement() 创建元素节点

createTextNode() 创建文本节点

insertBefore() 插入节点

removeChild() 删除节点

offsetHeight() 网页尺寸

scrollHeight() 网页尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<p name="pn">Hello</p>
		<a id="aid" title="得到了A标签的属性">Hello</a>
		<a id="aid2">aid2</a>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
		<div id="div">
			<p id="pid">div的p元素</p>
		</div>
		<script>
			function getName(){
				var count = document.getElementsByTagName("p");
				alert(count.length);
				var p = count[0];
				p.innerHTML = "World";
			}
			
			function getAttr(){
				var anode = document.getElementById("aid");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			
			function setAttr(){
				var anode = document.getElementById("aid2");
				anode.setAttribute("title","动态设置a的title属性");
				var attr = anode.getAttribute("title");
				alert(attr);
			}
			
			function getChildNode(){
				var childnode = document.getElementsByTagName("ul")[0].childNodes;
				alert(childnode.length);	
				alert(childnode[0].nodeType);
				alert(childnode[1].nodeType);
			}
			
			function getParentNode(){
				var div = document.getElementById("pid");
				alert(div.parentNode.nodeName);
			}
			
			function createNode(){
				var body = document.body;
				var input = document.createElement("input");
				input.type = "button";
				input.value = "按钮";
				body.appendChild(input);
			}
			
			function addNode(){
				var div = document.getElementById("div");
				var node = document.getElementById("pid");
				var newNode = document.createElement("p");
				newNode.innerHTML = "动态添加第一个p元素";
				div.insertBefore(newNode,node);
			}
			
			function removeNode(){
				var div = document.getElementById("div");
				var p = div.removeChild(div.childNodes[1]);
			}
			
			function getSize(){
				var width = document.body.offsetWidth||document.documentElement.offsetWidth;
				var height = document.body.offsetHeight||document.documentElement.offsetHeight;
				alert(width+","+height);
			}
			getSize();
		</script>
	</body>
</html>

以上是关于JavaScript DOM对象控制HTML元素详解的主要内容，如果未能解决你的问题，请参考以下文章

javascript DOM document属性

JavaScript基础—dom,事件

JavaScript高级内容

JS DOM对象，控制HTML元素

JavaScript HTML DOM 元素（节点）

JS DOM对象控制HTML元素详解