javascript6 DOM介绍

最新推荐文章于 2024-05-10 21:46:47 发布

IQ等于猪

最新推荐文章于 2024-05-10 21:46:47 发布

阅读量375

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sinat_41132860/article/details/84845612

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

document对象概述

每个载入浏览器的 HTML 文档都会成为 document 对象,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,document对象是window对象下的，在使用时，可以省略window。

DOM文档对象模型是基于HTML树的api,这里可以把html经过浏览器解析后形成DOM树,使用DOM可以操作html树的节点,即对html标签进行增删改差操作.

这是简单的DOM树形结构图

通过浏览器解析的html是document对象(文档节点,根节点).Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

HTML 元素是Element 对象(元素节点),Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点

HTML 元素的属性是属性节点,文本是文本节点,注释是注释节点

小结:三层结构,单个html页面是document对象(文档节点),有方法可以访问它的子节点,即html元素

html元素是元素节点对象,有方法可以访问它自己的属性节点,属性,文本节点,文本,子节点,父节点

属性节点也是节点对象,但只能是元素节点的子节点

还有事件对象,但事件对象是属于元素节点的属性

1 document对象

document是单个html页面的对象

指向document中特点元素集合的属性:

document.all ：文档中所有的元素，火狐浏览器不支持该属性。
document.forms ：所有的form元素。
document.images：所有的img元素。
document.links：所有的a元素。
document.scripts：所有的script元素。
document.styleSheets：所有的link或者style元素

document对象的属性

body提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。

cookie 设置或返回与当前文档有关的所有 cookie。

domain 返回当前文档的域名。

bgColor:返回当前文档的颜色给它赋值代表设置页面背景颜色

lastModified 返回文档被最后修改的日期和时间。

referrer 返回载入当前文档的文档的 URL。

title 返回当前文档的标题。给其赋值代表设置文档标题等价于HTML的<title>标签

URL 返回当前文档的 URLbody, 如果给其赋值代表设置URL属性从而在同一窗口打开另一网页

fileSize 文件大小,只读

常用方法:

createElement(Tag) 创建一个html标签对象,标签名称

getElementById(ID) 获得指定ID值的元素对象

getElementsByTagName(tagname) 获得指定标签名的集合对象

document.getElementsByName(name) 获得指定name值的集合对象

document.getElementsByClassName(classname) 获得指定类名的集合对象（html5 API）

createTextNode(str) 创建文本节点,参数文本内容

open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

close() 关闭用 document.open() 方法打开的输出流，并显示选定的数据。

write() 向文档写 HTML 表达式或 JavaScript 代码,动态写入内容。

writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

示例:

getElementById

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>getElementById</title>
</head>
<body>
	<form action="">
		<span> 用户名</span><span> <input type="text" id="name" name="inpu"/></span><br>
		<span> 密码</span><span> <input type="text" id="pwd" name="inpu" ></span><br>
		<span> 身份证号</span><span> <input type="text" id="idcard" name="inpu" /></span><br>
		<input type="button"  value="提交"  id="submit" name="inpu"/><br>
	</form>
</body>
<script type="text/javascript">
	
	username=document.getElementById("name");
	pwd=document.getElementById("pwd");
	idcard=document.getElementById("idcard");
	submit=document.getElementById("submit");
	submit.onclick=function(){
		alert(username.value);
		alert(pwd.value);
		alert(idcard.value)
	}
	
	
	

</script>
</html>

说明,对于可以有文本属性的html元素,都有value属性,js中调用的方式为元素.属性 ,如果value设置了初值,且没有改变,在js中调用value属性调用的是设置的值,如果value在网页中被修改,js中如果调用修改后的value,则是用户输入的值

getElementsByName

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>getElementsByName</title>
</head>
<body>
	<form action="" id="form1" name="input0">
		 用户名<input type="text" id="name" name="input1" value="username" />
		 密码 <input type="text" id="pwd" name="input1"  value="pwd">
		 身份证号 <input type="text" id="idcard" name="input1" value="1230" />
		   <input type="button"  value="提交"  id="submit" name="input1"/>
	</form>
</body>
<script type="text/javascript">
	arr=document.getElementsByName("input1");
		/*
	   for( index in arr){ 
		//如果不是该对象自身直接创建的属性（也就是该属//性是原型中的属性），则跳过显示 
		if(!arr.hasOwnProperty(index)){ 
		    continue; 
		} 
		   alert(arr[index].value); 
		} 	
	*/
	 
	for(var i=0;i<arr.length;i++){
		alert(arr[i].value);
	}
		

</script>
</html>

说明,获得的集合对象不能用for in循环来遍历,可以用普通for循环来遍历

getElementsByTagName

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
</head>
<body>
		<form action="#">
		<span> 用户名</span><span> <input type="text" id="name"  name="inpu"/></span><br>
		<span> 密码</span><span> <input type="text" id="pwd" name="inpu" ></span><br>
		<span> 身份证号</span><span> <input type="text" id="idcard" name="inpu" /></span><br>
		<select name="hobby" id="hobby">
            <option >篮球</option>
          	<option >足球</option>
          	<option >排球</option>
       </select><br>
       <select name="star" id="star" >
             <option >成龙</option>
          	<option >李连杰</option>
          	<option >甄子丹</option>
          	<option >吴京</option>
       </select>
		
	 <input type="button"  value="提交"  id="submit" name="inpu"/><br>
		
	</form>
</body>
<script type="text/javascript">
	//获取所有的input元素
	btn=document.getElementById("submit");
	/*
	btn.onclick=function(){
	var inputs=document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++){
		alert(inputs[i].value);
	}
	}
	*/
	 //输出input中type="text"中的 value属性值
	 /*
	btn.onclick=function(){
	var inputs=document.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++){
		if(inputs[i].type=="text"){
			alert(inputs[i].value)
		}
	}
	}
	*/
	 //输出所有option标签中value的值
	 /*
	 btn.onclick=function(){
	 var options=document.getElementsByTagName("option");
	 for(var i=0;i<options.length;i++){
		 alert(options[i].value);
	}
	}
	*/
	 //输出所有下拉框 id="star"中option标签中 value属性的值
	 /*
	 star=document.getElementById("star");
	  btn.onclick=function(){
		 var options=star.getElementsByTagName("option");
	 for(var i=0;i<options.length;i++){
		 alert(options[i].value);
	}
	}
	  */
	//输出下拉框中被选中的value值
	 
	 btn.onclick=function(){
		var options=document.getElementsByTagName("option");
	 	for(var i=0;i<options.length;i++){
		 	if(options[i].selected==true){
		 		alert(options[i].value);
		 	}
	  	}
	}

</script>
</html>

说明:option标签具有select属性,js中标签.属性的方式调用,input标签的type属性的调用方式同样是标签.属性

2 elelment元素对象

以树形结构来看我们知道了文档本身是文档节点,同样所有 HTML 元素是元素节点,

元素节点的分支包括了属性节点,文本节点(HTML 元素内的文本) ,注释节点(注释),和子元素节点

看下元素对象的常用方法

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。

element.childNodes 返回元素子节点的 NodeList。

element.firstChild 返回元素的首个子元素。

element.getAttribute(attributename) 返回元素节点的指定属性值。

element.getAttributeNode(attributename) 返回指定的属性节点.

element.getElementsByTagName() 返回拥有指定标签名的所有子元素的集合。

element.hasChildNodes() 如果元素拥有子节点，则返回 true，否则 false。

element.id 设置或返回元素的 id。

element.innerHTML 设置或返回元素的内容。

element.insertBefore(newnode,existingnode) 在指定的已有的子节点之前插入新节点。

element.lastChild 返回元素的最后一个子元素。

element.nodeName 返回元素节点的名称。如果节点是元素节点，nodeName返回这个元素的名称,如果是属性节点，nodeName返回这个属性的名称,如果是文本节点，返回一个内容为#text的字符串

element.nodeType 返回一个整数，数值表示节点的类型，常用的有下面三个：元素节点，返回1,属性节点，返回2,文本节点，返回3

element.nodeValue 设置或返回元素值。获取来说:元素节点，返回null,属性节点，返回当前属性的值,文本节点，返回文本内容

element.parentNode 返回元素的父节点。

element.removeChild(node) 从元素中移除子节点。参数,节点对象

element.replaceChild(newnode,oldnode) 替换元素中的子节点。参数:第1个,希望插入的节点,第2个希望删除的节点对象,剪切效果,第一个参数如果是已存在的别的节点,则会插入到这里来并删除掉该节点

element.setAttribute(attributename,attributevalue) 把指定属性设置或更改为指定值。第1个参数,属性名字,第2个参数,属性值

element.style 设置或返回元素的 style 属性。

nodelist.item() 返回 NodeList 中位于指定下标的节点。

nodelist.length 返回 NodeList 中的节点数。

示例:

hasChildNodes

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="" id="form1">
		<span> 用户名</span><span> <input type="text" id="name" name="inpu"/></span><br>
		<span> 密码</span><span> <input type="text" id="pwd" name="inpu" ></span><br>
		<span> 身份证号</span><span> <input type="text" id="idcard" name="inpu" /></span><br>
		<input type="button"  value="提交"  id="submit" name="inpu"/><br>
	</form>
	<div id="div1"></div>

</body>
<script type="text/javascript">
	form1=document.getElementById("form1");
	alert(form1.hasChildNodes());
	div1=document.getElementById("div1");
	alert(div1.hasChildNodes());
</script>
</html>

nodeName、nodeType和nodeValue

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>node</title>
</head>
<body>
	<form action="" id="form1">
		<span> 用户名</span><span> <input type="text" id="name" name="inpu" value="username"/></span><br>
		<span> 密码</span><span> <input type="text" id="pwd" name="inpu"  value="pwd"></span><br>
		<span> 身份证号</span><span> <input type="text" id="idcard" name="inpu" value="130" /></span><br>
		<input type="button"  value="提交"  id="submit" name="inpu"/><br>
	</form>
	<div id="div1">helloworld</div>
</body>
<script type="text/javascript">
   //元素节点
	/*
	username=document.getElementById("name");
	alert(username.nodeName);
	alert(username.nodeType);
	alert(username.nodeValue);
	*/
	//文本节点
	/*
	div1=document.getElementById("div1");
	txt=div1.firstChild;
	alert(txt.nodeName);
	alert(txt.nodeType);
	alert(txt.nodeValue);
	*/
	//属性节点
	idcard=document.getElementById("idcard");
	nodeattr=idcard.getAttributeNode("type");
	alert(nodeattr.nodeName);
	alert(nodeattr.nodeType);
	alert(nodeattr.nodeValue);
	
	

</script>
</html>

replaceChild()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>replaceChild</title>
</head>
<body>
	<form action="#">
		<span> 用户名</span><span> <input type="text" id="name"  name="inpu"/></span><br>
		<span> 密码</span><span> <input type="text" id="pwd" name="inpu" ></span><br>
		<span> 身份证号</span><span> <input type="text" id="idcard" name="inpu" /></span><br>
		<select name="hobby" id="hobby">
            <option >篮球</option>
          	<option  id="football">足球</option>
          	<option >排球</option>
       </select><br>
       <select name="star" id="star" >
             <option >成龙</option>
          	<option >李连杰</option>
          	<option   id="zzd">甄子丹</option>
          	<option >吴京</option>
       </select>
		
	 <input type="button"  value="提交"  id="submit" name="inpu"/><br>
	 <input type="button"  value="替换"  id="replace" name="inpu"/><br>
		
	</form>

</body>
<script type="text/javascript">
	football=document.getElementById("football");
	zzd=document.getElementById("zzd");
	star=document.getElementById("star");
	replace=document.getElementById("replace");
	replace.onclick=function(){
		star.replaceChild(football,zzd);
	}
</script>
</html>

getAttribute()and setAttribute()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getandsetAttribute</title>
</head>
<body>
	<form name="baseInfo" action="#" method="post">
        姓名：<input type="text"  id="name">
        <br>
        密码：<input type="password"  id="pwd" >
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
   //获取并修改姓名栏属性
	username=document.getElementById("name");
	inputtype1=username.getAttribute("type");
	alert(inputtype1);
	username.setAttribute("type","password");
	username.setAttribute("style","color:red");
	//获取并修改提交按钮属性
	button=document.getElementById("btn");
	btnname=button.getAttribute("name");
	alert(btnname);
	button.setAttribute("value","提交吧");
	button.setAttribute("style","color:red");
	
</script>
</html>

appendChild(),createElement(),createTextNode()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>createElement</title>
</head>
<body>
	<form name="baseInfo" action="#" method="post" id="form1">
        姓名：<input type="text"  id="name">
        <br>
        密码：<input type="password"  id="pwd" >
        <br>
        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
	var form=document.getElementById("form1");
	br=document.createElement("br");
	form.appendChild(br);//添加换行
	var create1=document.createElement("a");//创建a元素节点
	create1.setAttribute("href","http://www.baidu.com");//为其设置href属性
	var txt=document.createTextNode("百度一下");//创建文本节点
	create1.appendChild(txt);  //向a元素节点添加文本节点
	form.appendChild(create1); //向form元素节点添加子节点 即a元素节点

</script>
	

</html>

insertBefore()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>insertBefore</title>
</head>
<body id="body">
	<form name="baseInfo" action="#" method="post" id="form1">
	        姓名：<input type="text"  id="name">
	        <br>
	        密码：<input type="password"  id="pwd" >
	        <br>
	        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
	var body=document.getElementById("body"); //获取body节点
	var form=document.getElementById("form1"); //获取form节点
	   var create1=document.createElement("a");//创建a元素节点
	   create1.setAttribute("href","http://www.baidu.com");//为其设置href属性
	   var txt=document.createTextNode("百度一下");//创建文本节点
	   create1.appendChild(txt);
	body.insertBefore(create1,form);//将新节点插入到form节点之前
	
</script>
</html>

removeChild()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>removeChild</title>
</head>
<body>
	<form name="baseInfo" action="#" method="post" id="form1">
	        姓名：<input type="text"  id="name">
	        <br>
	        密码：<input type="password"  id="pwd" >
	        <br>
	        <input type="button" id="btn" name="submit" value="提交" />
    </form>
</body>
<script type="text/javascript">
	form=document.getElementById("form1");//获取form节点
	txt=form.firstChild;
	form.removeChild(txt);
	username=document.getElementById("name");//获取form的一个子节点
	form.removeChild(username);//删除这个子节点
	
	
</script>
</html>

innerHTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table>
    <tr id="tr1">
        <td id="td1">数学</td>
        <td id="td2">语文</td>
    </tr>
    </table>
    <div id="d1">helloworld</div>
</body>
<script type="text/javascript">
	var tr=document.getElementById("tr1");
	alert(tr.innerHTML);//获取innerHTML内容
	var d1=document.getElementById("d1"); 
	d1.innerHTML="global world";//修改innerHTML内容

</script>
</html>

3 attr 属性对象

Attr 对象表示 HTML 属性节点,是在元素节点的下一级的节点,

attr.isId 如果属性是 id 类型，则返回 true，否则返回 false。

attr.name 返回属性的名称。

attr.value 设置或返回属性的值。

attr.specified 如果已指定属性，则返回 true，否则返回 false。

4 event对象

event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

事件是html元素的属性,如需向 HTML 元素分配事件,js中可以使用事件属性

具体示例可参考我之前的博客https://mp.csdn.net/postedit/84796748

参考:小猴子视频

http://www.w3school.com.cn

IQ等于猪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript6 DOM介绍

目录 document对象概述1 document对象2 elelment元素对象3 attr 属性对象4 event对象 document对象概述每个载入浏览器的 HTML 文档都会成为 document 对象,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,document对象是window对象下的，在使用时，可以省略win...
复制链接

扫一扫