JavaScript（十八）：DOM对象

时间 2019-11-12

标签 javascript 十八 dom 对象栏目 JavaScript 繁體版

原文原文链接

1、认识DOM

DOM（Document Object Model，文档对象模型）：定义访问和处理HTML文档的标准方法。DOM 将 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。javascript

先来看看下面代码:css

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
		<title>DOM</title>
	</head>
	<body>
		<h2>
			<a href="http://www.imooc.com">javascript DOM</a>
		</h2>
		<p>
			对HTML元素进行操做，可添加、改变或移除CSS样式等
		</p>
		<ul>
			<li>JavaScript</li>
			<li>DOM</li>
			<li>CSS</li>
		</ul>
	</body>
</html>

将 HTML 代码分解为 DOM 节点层次图: html

文档构成：

HTML 文档能够说由节点构成的集合，DOM 节点有:java

元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。node
文本节点 :向用户展现的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。jquery
属性节点: 元素属性，如<a>标签的连接属性href="http://www.imooc.com"。chrome

看下面代码:数组

<a href="http://www.imooc.com">JavaScript DOM</a>

2、元素节点获取方式

2.一、经过 ID 获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的 id 属性值是惟一的，就像是每人有一个身份证号同样，只要经过身份证号就能够找到相对应的人。那么在网页中，咱们经过id先找到标签，而后进行操做。浏览器

语法:app

document.getElementById("id")

看看下面代码:

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
		<title>获取元素</title>
		<script type="text/javascript">
		  var mye = document.getElementById("con");//获取元素存储在变量mye中
		  document.write(mye);// 输出变量mye
		</script>
	</head>
	<body>
		<h3>Hello</h3>
		<p id="con">I love JavaScript</p>
	</body>
</html>

结果：null或[object HTMLParagraphElement]

注：获取的元素是一个对象，如想对元素进行操做，咱们要经过它的属性或方法。

2.二、 getElementsByName() 方法

返回带有指定名称的节点对象的集合。

语法：

document.getElementsByName(name)

与getElementById() 方法不一样的是，经过元素的 name 属性查询元素，而不是经过id属性。

注意:

由于文档中的 name 属性可能不惟一，全部 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
和数组相似也有 length 属性，能够和访问数组同样的方法来访问，从0开始。

看看下面的代码:

<!DOCTYPE HTML>
<html>
	<head>
		<script type="text/javascript">
		  function getElements(){
		     var x = document.getElementsByName("alink");
			 alert(x.length);
		  }
		</script>
	</head>
	<body>
		<a name="alink" href="#">我是连接一</a>
	    <a name="alink" href="#">我是连接二</a>
	    <a name="alink" href="#">我是连接三</a>
		<br />
		<input type="button" onclick="getElements()" value = "看看几个连接?" />
	</body>
</html>

运行结果:

2.三、 getElementsByTagName() 方法

返回带有指定标签名的节点对象的集合。
返回元素的顺序是它们在文档中的顺序。

语法:

document.getElementsByTagName(Tagname)

说明:

Tagname 是标签的名称，如p、a、img等标签名。
和数组相似也有length属性，能够和访问数组同样的方法来访问，因此从0开始。

看看下面代码，经过getElementsByTagName()获取节点。

<!DOCTYPE HTML>
<html>
	<head>
	    <title>JavaScript</title>
	</head>
	<body>
	    <p id="intro">个人课程</p>
		<ul>
		  <li>JavaScript</li>
		  <li>JQuery</li>
		  <li>HTML</li>
		  <li>JAVA</li>
		  <li>PHP</li>
		</ul>
		<script>
		  // 获取全部 li 集合
		  var list = document.getElementByTagName('li');
		  // 访问无序列表:[0]索引
		  li =  list[0];
		  // 获取 list 的长度
		  document.write(list.length);
		  // 弹出 li 节点对象的内容
		  document.write(li.innerHTML);
		</script>
	</body>
</html>

2.四、上述三种方式的区别

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

ID 是一我的的身份证号码，是惟一的。因此经过getElementById获取的是指定的一我的。
Name 是他的名字，能够重复。因此经过getElementsByName获取名字相同的人集合。
TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

把上面的例子转换到HTML中，以下:

<input type="checkbox" name="hobby" id="hobby1">  音乐

input标签就像人的类别。
name属性就像人的姓名。
id属性就像人的身份证。

方法总结以下:

方法	说明	结果集
getElementById	经过指定 id 得到元素	1个
getElementsByName	经过元素名称 name 属性得到元素	1组
getElementsByTagName	经过标签名称得到元素	1组

**注意：**方法区分大小写

经过下面的例子(6个name="hobby"的复选项，两个按钮)来区分三种方法的不一样:

<input type="checkbox" name="hobby" id="hobby1">  音乐
  <input type="checkbox" name="hobby" id="hobby2">  爬山
  <input type="checkbox" name="hobby" id="hobby3">  游泳
  <input type="checkbox" name="hobby" id="hobby4">  阅读
  <input type="checkbox" name="hobby" id="hobby5">  打球
  <input type="checkbox" name="hobby" id="hobby6">  跑步 
  <input type="button" value = "全选" id="button1">
  <input type="button" value = "全不选" id="button1">

document.getElementsByTagName("input")，结果为获取全部标签为input的元素，共8个。
document.getElementsByName("hobby")，结果为获取属性name="hobby"的元素，共6个。
document.getElementById("hobby6")，结果为获取属性id="hobby6"的元素，只有一个，"跑步"这个复选项。

3、节点属性

3.一、属性详解

在文档对象模型 (DOM) 中，每一个节点都是一个对象。

属性	描述
nodeName	节点的名称：返回一个字符串，其内容是给定节点的名字
nodeType	节点的类型：返回一个整数，这个数值表明给定节点的类型
nodeValue	节点的值：返回给定节点的当前值

3.1.一、 nodeName 属性

节点的名称，是只读的。

说明：

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

3.1.二、 nodeValue 属性

节点的值

说明：

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

3.1.三、nodeType 属性

节点的类型，是只读的。

如下经常使用的几种结点类型:

元素类型	节点类型
元素	1
属性	2
文本	3
注释	8
文档	9

3.二、属性值获取：getAttribute() 方法

经过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

elementNode：使用 getElementById()、getElementsByTagName()等方法，获取到的元素节点。
name：要想查询的元素节点的属性名字

举例：获取 h1 标签的属性值：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
		<title>getAttribute()</title>
	</head>
	<body>
		<h1 id="alink" title="getAttribute()获取标签的属性值" onclick="hattr()">点击我，获取标签的属性值</h1>
	
		<script type="text/javascript">
		  function hattr(){
		     var anode = document.getElementById("alink");
			 var attr1 = anode.getAttribute("id");
			 var attr2 = anode.getAttribute("title");
			 document.write("h1标签的ID:" + attr1 + "<br>");
			 document.write("h1标签的title:" + attr2 );
		  }
		</script>
	</body>
</html>

运行结果:

h1标签的ID ：alink
h1标签的title ：getAttribute()获取标签的属值

3.三、属性值设置： setAttribute() 方法

setAttribute() 方法增长一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

name: 要设置的属性名。
value: 要设置的属性值。

注意：

把指定的属性设置为指定的值。若是不存在具备指定名称的属性，该方法将建立一个新属性。
相似于getAttribute()方法，setAttribute()方法只能经过元素节点对象调用的函数。

4、遍历节点树

属性	描述
childNodes	返回一个数组，这个数组由给定元素节点的子节点构成
firstChild	返回第一个子节点
lastChild	返回最后一个子节点
parentNode	返回一个给定节点的父节点
nextSibling	返回给定节点的下一个兄弟节点
previousSibling	返回给定节点的上一个兄弟节点

以层次图中 ul 为例，它的父级节点 body,它的子节点3 个li,它的兄弟结点h2、P。

4.一、childNodes

访问给定 元素节点 下的全部子节点的列表。
返回的值能够看做是一个数组，具备 length 属性。

语法：

elementNode.childNodes

注意：若是选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

举例：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>无标题文档</title>
	</head>
	<body>
		<ul>
			<li>JavaScript</li>
			<li>jQuery</li>
			<li>PHP</li>
		</ul>
		<script type="text/javascript">
		  var x = document.getElementByTagName("ul")[0].childNodes;
		  document.write("UL子节点个数：" + x.length + "<br />");
		  document.write("节点类型：" + x[0].nodeType);
		</script>
	</body>
</html>

运行结果: IE:

UL子节点个数:3
  节点类型:1

其它浏览器:

UL子节点个数:7
   节点类型:3

出现上述结果的缘由以下：

IE全系列、firefox、chrome、opera、safari兼容问题
节点之间的空白符，在firefox、chrome、opera、safari浏览器是文本节点,在 IE中会忽略掉。以下:

<ul> 空白节点
     <li>javascript</li> 空白节点
	 <li>jQuery</li>  空白节点
	 <li>PHP</li>  空白节点
  </ul>

若是把代码改为这样:

<ul><li>javascript</li><li>jQuery</li><li>PHP</li></ul>

运行结果:（IE和其它浏览器结果是同样的）

UL子节点个数:3
  节点类型:1

4.二、 firstChild and lastChild：访问子节点的第一和最后项

(1) `firstChild` 属性

返回 childNodes 数组的第一个子节点。
若是选定的节点没有子节点，则该属性返回 NULL。

语法：

node.firstChild

说明：
与 elementNode.childNodes[0] 是一样的效果。

(2)、 lastChild 属性

返回 childNodes 数组的最后一个子节点。
若是选定的节点没有子节点，则该属性返回 NULL。

语法：

node.lastChild

说明：
与 elementNode.childNodes[elementNode.childNodes.length-1] 是一样的效果。

注意: 上一节中，咱们知道 Internet Explorer 会忽略节点之间生成的空白文本节点，而其它浏览器不会。咱们能够经过检测节点类型，过滤子节点。 (之后章节讲解)

4.三、访问父节点:parentNode

获取指定节点的父节点。

注意:
浏览器兼容问题，chrome、firefox等浏览器标签之间的空白也算是一个文本节点。

语法：

elementNode.parentNode

注意:父节点只能有一个。

举例：
(1)、获取 P 节点的父节点，代码以下:

<div id="text">
  <p id="con"> parentNode 获取指点节点的父节点</p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.nodeName);
</script>

运行结果:

parentNode 获取指点节点的父节点
DIV

(2)、访问祖节点:

elementNode.parentNode.parentNode

看看下面的代码:

<div id="text">  
  <p>
    parentNode      
    <span id="con"> 获取指点节点的父节点</span>
  </p>
</div> 
<script type="text/javascript">
  var mynode= document.getElementById("con");
  document.write(mynode.parentNode.parentNode.nodeName);
</script>

运行结果:

parentNode获取指点节点的父节点
DIV

4.四、访问兄弟节点:nextSibling、previousSibling

(1)、`nextSibling` 属性

可返回某个节点以后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling

说明：若是无此节点，则该属性返回 null。

(2)、 `previousSibling` 属性

可返回某个节点以前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：若是无此节点，则该属性返回 null。

(3)、举例

注意：

两个属性获取的是节点。
Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

如何获取正确的兄弟节点，解决方法:
遍历兄弟节点时判断节点nodeType是否为1（元素节点）,不是继续遍历直到得到的是元素节点为止。以下代码：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>nextsibling</title>
	</head>
	<body>
		<ul id="u1">
			<li id="a">javascript</li>
			<li id="b">jquery</li>
			<li id="c">html</li>
		</ul>
		<ul id="u2">
			<li id="d">javascript</li>
			<li id="e">jquery</li>
			<li id="f">html</li>
		</ul>
		<script type="text/javascript">
		  function get_nextSibling(n){
		    var x=n.nextSibling;
			while(x.nextSibling != 1){
			  x = x.nextSibling;
			}
			
			retrun x;
		  }
		  var x = document.getElementByTagName("li")[0];
		  document.write(x.nodeName);
		  document.write("=");
		  document.write(x.innerHTML);
		  
		  var y = get_nextSibling(x);
		  document.write("nextSibling:" + y.nodeName);
		  document.write("=");
		  document.write(y.innerHTML); 
		</script>
	</body>
</html>

运行结果:

LI = javascript
nextsibling: LI = jquery

5、修改节点树

方法	描述
createElement(element)	建立一个新的元素节点
createTextNode()	建立一个包含给定文本的新文本节点
appendChild()	指定节点的最后一个子节点列表以后添加一个新的子节点
insertBefore()	将一个给定节点插入到一个给定元素节点的给定子节点前面
removeChild()	从一个给定元素中删除一个子节点
replaceChild()	把一个给定父元素里的一个子节点替换为另一个节点

注意: 前两个是 document 方法。

5.一、建立节点

（1）建立元素节点：createElement

createElement() 方法可建立元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明建立元素的类型。

注意：要与 appendChild() 或 insertBefore() 方法联合使用，建立后将元素显示在页面中。

实例：咱们来建立一个按钮，代码以下：

<script type="text/javascript">
   var body = document.body; 
   var input = document.createElement("input");  
   input.type = "button";  
   input.value = "建立一个按钮";  
   body.appendChild(input);  
 </script>

**效果：**在HTML文档中，建立一个按钮。

咱们也可使用 setAttribute（见第五章节）来设置属性，代码以下：

<script type="text/javascript">  
   var body= document.body;             
   var btn = document.createElement("input");  
   btn.setAttribute("type", "text");  
   btn.setAttribute("name", "q");  
   btn.setAttribute("value", "使用setAttribute");  
   btn.setAttribute("onclick", "javascript:alert('This is a text!');");       
   body.appendChild(btn);  
</script>

效果： 在HTML文档中，建立一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。

（2）建立文本节点：createTextNode

createTextNode() 方法建立新的文本节点，返回新建立的 Text 节点。

语法：

document.createTextNode(data)

参数： data : 字符串值，可规定此节点的文本。

实例：咱们来建立一个 <div> 元素并向其中添加一条消息，代码以下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>无标题</title>
		<style type="text/css">
		  .message{
		     width:200px；
			 height:100px;
			 background-color:#CCC;
		  }
		</style>
	</head>
	<body>
		<script type="text/javascript">
		  var element = document.createElement("div");
		  element.className = "message";
		  
		  var textNode = document.createTextNode("Hello world!");
		  element.appendChild(textNode);
		  document.body.appendChild(element);
		</script>
	</body>
</html>

运行结果:

5.二、插入节点

（1） `appendChild()`

在指定节点的最后一个子节点列表以后添加一个新的子节点。

语法：

appendChild(newnode)

参数:

newnode：指定追加的节点。

实例：

<div id="test"><p id="x1">HTML</p><p>JavaScript</p></div>
	    <script type="text/javascript">
		    var otest = document.getElementById("test");
			var newnode = document.createElement("p");
			newnode.innerHEML = "This is a new p";
			// appendChild方法添加节点
			otest.appendChild(newnode);
		</script>

运行结果:

HTML
JavaScript
This is a new p

（2） `insertBefore()`

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法：

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。
node: 指定此节点前插入节点。

实例：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>无标题</title>
	</head>
	<body>
	    <div id="div1"><p id="x1">JavaScript</p><p>HTML</p></div>
	    <script type="text/javascript">
		    var otest = document.getElementById("div1");
			var node = document.getElementById("x1");
			var newnode = document.createElement("p");
			newnode.innerHEML = "This is a new p";
			otest.insertBefore(newnode,node);
		</script>
	</body>
</html>

运行结果:

This is a new p
JavaScript
HTML

注意：
otest.insertBefore(newnode,node);
也能够改成:
otest.insertBefore(newnode,otest.childNodes[0]);

5.三、删除节点：removeChild()

removeChild() 方法从子节点列表中删除某个节点。
如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node ：必需，指定须要删除的节点。

实例：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>无标题</title>
	</head>
	<body>
	    <div id="div1"><h1>HTML</h1><h2>javascript</h2></div>
	    <script type="text/javascript">
		    var otest = document.getElementById("div1");
			var x = otest.removeChild(otest.childNodes[1]);
			document.write("删除节点的内容：" + x.innerHTML);
		</script>
	</body>
</html>

运行结果:

HTML
删除节点的内容: javascript

注意:

把删除的子节点赋值给 x，这个子节点不在 DOM 树中，可是还存在内存中，可经过 x 操做。
若是要彻底删除对象，给 x 赋 null 值，代码以下:

var otest = document.getElementById("div1");
   var x = otest.removeChild(otest.childNodes[1]);
   x=null;

5.四、替换元素节点：replaceChild()

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。
oldnew : 必需，被 newnode 替换的对象。

举例：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<title>无标题</title>
	</head>
	<body>
	<script type="text/javascript">
		  function replaceMessage(){
		    var newnode=document.createElement("p");
			var newnodeText = document.createTextNode("JavaScript");
			
			newnode.appendChild(newnodeText);
			
			var oldNode = document.getElementById("oldnode");
			oldnode.parentNode.replaceChild(newnode,oldnode);
		  }
		</script>
		<h1 id="oldnode">Java<h1>
		<a href="javascript:replaceMessage()">"Java" 替换 "JavaScript"</a>
		
	</body>
</html>

**效果 **: 将文档中的 Java 改成 JavaScript。

注意:

当 oldnode 被替换时，全部与之相关的属性内容都将被移除。
newnode 必须先被创建。

JavaScript（十八）：DOM对象

1、 认识DOM

文档构成：

2、元素节点获取方式

2.一、经过 ID 获取元素

2.二、 getElementsByName() 方法

2.三、 getElementsByTagName() 方法

2.四、上述三种方式的区别

3、节点属性

3.一、属性详解

3.1.一、 nodeName 属性

3.1.二、 nodeValue 属性

3.1.三、nodeType 属性

3.二、属性值获取：getAttribute() 方法

3.三、 属性值设置： setAttribute() 方法

4、 遍历节点树

4.一、childNodes

4.二、 firstChild and lastChild：访问子节点的第一和最后项

(1) firstChild 属性

(2)、 lastChild 属性

4.三、 访问父节点:parentNode

4.四、 访问兄弟节点:nextSibling、previousSibling

(1)、nextSibling 属性

(2)、 previousSibling 属性

(3)、举例

5、修改节点树

5.一、 建立节点

（1）建立 元素 节点：createElement

（2）建立文本节点：createTextNode

5.二、 插入节点

（1） appendChild()

（2） insertBefore()

5.三、 删除节点：removeChild()

5.四、 替换元素节点：replaceChild()

1、认识DOM

3.三、属性值设置： setAttribute() 方法

4、遍历节点树

(1) `firstChild` 属性

4.三、访问父节点:parentNode

4.四、访问兄弟节点:nextSibling、previousSibling

(1)、`nextSibling` 属性

(2)、 `previousSibling` 属性

5.一、建立节点

（1）建立元素节点：createElement

5.二、插入节点

（1） `appendChild()`

（2） `insertBefore()`

5.三、删除节点：removeChild()

5.四、替换元素节点：replaceChild()