DOM编程

简介

DOM:基于文档对象模型编程,解析HTML页面时,js引擎将HTML页面中每一个标签都封装成一对象,通过操作这些对象在页面中显示效果
整个文档:document
一个标签对象代表一个节点:Node — 属性:nodeName(节点名称)
它是以一个树状结构进行存储:

HTML
HEAD
BODY
MATA
TITLE
FORM
INPUT
INPUT

学习DOM编程的作用:

  • 通过文档对象的一些属性或者一些方法获取标签对象
  • 通过标签对象更改他的属性来显示一些效果

通过document的集合属性获取标签对象

all:返回当前页面中的所有标签对象集合
forms:获取当前页面中的所有form标签对象的集合
images:获取页面中所有ing标签对象的集合
links:获取当前页面中所有的a标签的集合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通过document的集合属性获取标签对象</title>
	</head>
	<body>
<form>
	<a href="#">超链接</a><img src = "" />
	<img src = "" />
</form>
<form>
	<a href="#"></a><img src = ""/>
</form>
	</body>
<script>
	/*var nodeList = document.all;*/
	//var nodeList = document.forms;
	var nodeList = document.links;
	alert(nodeList.length);
	for(var i = 0;i<nodeList.length;i++){
		document.write(nodeList[i].nodeName+"  ");
	}
</script>
</html>

通过查询节点关系获取标签对象

节点关系:
1.parentNode:父节点
2.childNodes:当前的所有子节点
3.firstChild:第一个子节点
4.lastChild:最后一个子节点
5.兄弟节点:sibling

  • nextSibling:下一个兄弟节点
  • previousSibling:上一个兄弟节点

在节点关系:childNodes,firstChild,lastChild,有一个节点的类型:nodeType(查看节点类型)

类型 对应 名称
空格换行 3 #text
标签对象 1
HTML注释 8 #comment
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通过查询节点关系来获取标签对象</title>
	</head>
	<body>
<form><a href="#"></a><input type="text" /><input type="button" /></form>
<form><a href="#"></a><img src="" /><input type="button" /></form>
	</body>
	<script>
		//需求1:需要获取第一个a标签对象 
		var aNode = document.links[0];
		alert(aNode.nodeName);
		//需求2:获取他的父节点标签
		var parent = aNode.parentNode;
		alert(parent.nodeName);
		//需求3:获取当前第一个form标签对象的所有子节点对象
		var childs = parent.childNodes;
		alert(childs.length)
		for(var i = 0;i<childs.length;i++){
			if(childs[i].nodeType == 1){
				document.write(childs[i].nodeName+",节点类型是:"+childs[i].nodeType+"
"
); } } //需求4:通过parent获取第一个子节点对象 var node = parent.firstChild; alert(node.nodeName); //需求5:通过parent获取最后一个子节点对象 var last = parent.lastChild; alert(last.nodeName); //获取第二个a节点 var aNode = document.links[1]; alert(aNode.nodeName); //获取aNode下一个兄弟节点 var next = aNode.nextSibling; alert(next.nodeName); </script> </html>

通过docuent方法获取标签对象

  • getElementById(“id属性值”);返回的是某个标签对象 / / id一定要唯一
  • getElementsByName(“name属性值”);返回的标签对象集合
  • getElementsByTagName(“标签名称”);/ / 通过标签名称获取标签对象
<html>
	<head>
		<meta charset="UTF-8">
		<title>通过document方法获取标签对象</title>
		<script>
			function init(){
				//1.
				/*var username = document.getElementById("user_name").value;
				alert(username);*/
				//2.
				/*var username = document.getElementsByName("username")[0].value;
				alert(username);*/
				//3.
				var username = document.getElementsByTagName("input")[0].value;
				alert(username);
			}
		</script>
	</head>
	<body onload="init()">
用户名:<input type="text" name="username" id="user_name" onblur="init()"/>
	</body>
</html>

其他操作

文档对象:document

  • 添加元素对象相关的方法:
    document.creatElement(“标签元素名称”);
    举例:创建 document.creatElement(“input”);
    setAttribute(“属性名称”,“属性值”);
    举例:元素对象.setAttribute(“type”,“button”);
  • 插入相关的方法:
    appendChild(指定元素对象);在父节点中调用
    insertBefore(新元素对象,指定元素对象);在指定对象前插入这个新对象
  • .和删除相关的方法
    removeChild(子节点对象);
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>document操作标签对象的其他方法</title>
		<script>
			
			function addbutton(){
				//创建一个input标签对象
				var input = document.createElement("input");
				input.setAttribute("type","button");
				input.setAttribute("value","新按钮");
				var bodyNode = document.getElementsByTagName("body")[0];
				bodyNode.appendChild(input);
			}
		</script>
	</head>
	<body>
<input type="button" value="添加" onclick="addbutton()"/><input type="button" value="按钮" />
	</body>
</html>

你可能感兴趣的:(JS)