HTML DOM方法

来源：互联网发布：拼多多商城源码编辑：程序博客网时间：2024/06/05 20:06

一些 DOM 对象方法

这里提供一些您将在本教程中学到的常用方法：

方法描述getElementById()返回带有指定 ID 的元素。getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。appendChild()把新的子节点添加到指定节点。removeChild()删除子节点。replaceChild()替换子节点。insertBefore()在指定的子节点前面插入新的子节点。createAttribute()创建属性节点。createElement()创建元素节点。createTextNode()创建文本节点。getAttribute()返回指定的属性值。setAttribute()把指定属性设置或修改为指定的值。

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

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

HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

HTML DOM Tree 实例

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

请看下面的 HTML 片段：

<html>  <head>    <title>DOM 教程</title>  </head>  <body>    <h1>DOM 第一课</h1>    <p>Hello world!</p>  </body></html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点：<head> 和 <body>
<head> 节点拥有一个子节点：<title> 节点
<title> 节点也拥有一个子节点：文本节点 "DOM 教程"
<h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点
<body> 元素是 <html> 元素的最后一个子节点
<h1> 元素是 <body> 元素的首个子节点
<p> 元素是 <body> 元素的最后一个子节点

警告！

DOM 处理中的常见错误是希望元素节点包含文本。

在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

您将在稍后的章节中学习更多有关 innerHTML 属性的知识。

<html><head><title>Skip Blanks String</title><script type="text/javaScript">//忽略空白字符串function SkipBlanksString(element){var ret = [];for(var i=0; i<element.length; i++){ if(element[i].nodeType === 3 && /^\s+$/.test(element[i].nodeValue)){ continue;} else { ret.push(element[i]);}}return ret;};//删除空白字符function RemoveSkipString(element){ for(var i=0; i<element.length; i++){ if(element[i].nodeType === 3 && /^\s+$/.test(element[i].nodeValue)){ element[i].parentNode.removeChild(element[i]);}}return element;};window.onload = function (){var box = document.getElementById('box');alert(RemoveSkipString(box.childNodes).length);  //返回数量3alert(SkipBlanksString(box.childNodes).length);   //返回数量3};</script></head><body><div id="box"><p id="p1">hello world!</p>Fuck You!<p>this is the last line</p></div></body></html>

<html><head><meta charset="UTF-8"><title>Skip Blanks String</title><script type="text/javaScript">//删除空白字符function Rst(node){ for(var i=0; i<node.length; i++){ if(node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)){ node[i].parentNode.removeChild(node[i]);}}return node;};window.onload = function (){ var box = document.getElementById('box'); var Skip = Rst(box.childNodes);   //删除所有空白字符var createD = document.createElement('div');   //创建元素节点<div></div>for(var i=0; i<Skip.length; i++){ var createP = document.createElement('p');    //创建元素节点 <p></p>var Str ='';if(Skip[i].nodeType === 1){ Str = Skip[i].innerHTML;   //如果是“元素节点”输出innerHTML 赋值给 Str} else { Str = Skip[i].nodeValue;   //如果是“文本节点”输出nodeValue 赋值给 Str};var createT = document.createTextNode(Str);   //创建文本节点createP.appendChild(createT);   //把文本节点添加到P元素下box.parentNode.appendChild(createD).appendChild(createP);   //添加DIV标签,再DIV下添加子节点P标签};};</script></head><body><div id="box"><p id="p1">hello world!</p><span>Fuck You....</span>激光电波,毕.........<p>this is the last line</p></div></body></html>

<html><head><meta charset="UTF-8"><title>2016年1月9日 23:35:52</title><script type="text/JavaScript">function evening(){ var Col = document.body.style;Col.backgroundColor ="blue";};function nooning(){ var Col = document.body.style;Col.backgroundColor ="lavender"};winDow.onload = function(){ };</script></head><body><button type="button" onclick="var i=0; setInterval(function(){document.body.innerHTML=i++},500);">Hello world!</button><input type="button" onclick="setInterval(evening,500)" value="This is the button" /><button type="button" onclick="setInterval(nooning,1000)">This is the third</button></body></html>

0 0