javaScript DOM编程经常使用的方法与属性

Posted 2020-10-02 zhchoutai

DOM是Document Object Model文档对象模型的缩写。依据W3C DOM规范,DOM是一种与浏览器，平台，语言无关的接口，使得你能够訪问页面其它的标准组件。

Node接口的特性和方法

特性/方法	类型/放回类型	说明
nodeName	String	节点的名字；依据节点的类型而定义
nodeValue	String	节点的值。依据节点的类型而定义
nodeType	Number	节点的类型常量值之中的一个
ownerDocument	Document	指向这个节点所属的文档
firstChild	Node	指向在childNodes列表中的第一个节点
lastChild	Node	指向在childNodes列表中的最后一个节点
childNodes	NodeList	全部子节点的列表
previousSibling	Node	指向前一个兄弟节点；假设这个节点就是第一个兄弟节点。那么该值为null
nextSibling	Node	指向后一个兄弟节点；假设这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes()	Boolean	当childNodes包括一个或多个节点时。返回真
attributes	NamedNodeMap	包括了代表一个元素的特性的Attr对象。仅用于Element节点
appendChild(node)	Node	将node加入到childNodes的末尾
removeChild(node)	Node	从childNodes中删除node
replaceChild (newnode, oldnode)	Node	将childNodes中的oldnode替换成newnode
insertBefore (newnode, refnode)	Node	在childNodes中的refnode之前插入newnode

hasChildNodes() -- 查看是否存在子节点
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包括不论什么子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

replaceChild() -- 节点替换
把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);

返回值是一个指向已被替换的那个子节点的引用指针。
假设被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

getAttribute()   -- 查找属性节点
返回一个给定元素的一个给定属性节点的值

var attributeValue = element.getAttribute(attributeName);

给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回，假设给定属性不存在，getAttribute() 将返回一个空字符串.

setAttribute() -- 设置属性节点
将给定元素节点加入一个新的属性值或改变它的现有属性的值。

 element.setAttribute(attributeName,attributeValue);

属性的名字和值必须以字符串的形式传递给此方法
假设这个属性已经存在。它的值将被刷新；
假设不存在，setAttribute()方法将先创建它再为其赋值。

createElement() -- 创建新元素节点
依照给定的标签名创建一个新的元素节点。

方法仅仅有一个參数：将被创建的元素的名字。是一个字符串.

var reference = document.createElement(element);

方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点。所以它的 nodeType 属性值等于 1。
新元素节点不会自己主动加入到文档里，新节点没有 nodeParent 属性。它仅仅是一个存在于 javascript 上下文的对象.

var pElement = document.createElement("p");

createTextNode() -- 创建新文本节点
创建一个包括着给定文本的新文本节点。

这种方法的返回值是一个指向新建文本节点引用指针。

  var textNode = document.createTextNode(text);
方法仅仅有一个參数：新建文本节点所包括的文本字符串
方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.
新元素节点不会自己主动加入到文档里，新节点没有 nodeParent 属性

var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);

appendChild() -- 插入节点（1）
为给定元素添加一个子节点：                                   
   var newreference = element.appendChild(newChild).              
   给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点能够被追加给文档中的不论什么一个元素

 var newliElement=document.createElement("li");
 var textNode=document.createTextNode("北京");
 newliElement.appendChild(textNode);
 document.body.appendChild(newliElement);
 
 var liElement=document.getElementsByTagName("li");
 var textValue=liElement[0].firstChild.nodeValue;
 alert(textValue);

insertBefore() -- 插入节点（2）
把一个给定节点插入到一个给定元素节点的给定子节点的前面

var reference =  element.insertBefore(newNode,targetNode);

节点 newNode 将被插入到元素节点 element 中并出如今节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。

该方法通常与 createElement() 和 createTextNode() 配合使用

<ul id="city">     <li value="beijing^" id="beijing">北京</li>        </ul>
<ul id="city01">   <li value="shanghai^" id="shanghai">上海</li>          </ul>
 //获取父节点
 var parentCityNode=document.getElementById("city");
 //获取子节点
 var beijingNode=document.getElementById("beijing");
 var shanghaiNode=document.getElementById("shanghai");
 //插入
 parentCityNode.insertBefore(shanghaiNode,beijingNode);

removeChild() -- 删除子节点
从一个给定元素里删除一个子节点

var reference = element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。

某个节点被removeChild()方法删除时,这个节点所包括的全部子节点将同一时候被删除。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var ulElement=document.getElementById("city");
var liElement=document.getElementById("beijing");
ulElement.removeChild(liElement);

假设想删除某个节点，但不知道它的父节点是哪一个。parentNode 属性能够帮忙。

<ul id="city">  <li value="beijing^" id="beijing">北京</li> </ul>
var liElement=document.getElementById("beijing");
var parentElement=liElement.parentNode;
parentElement.removeChild(liElement);

ChildNodes -- 遍历节点树

ChildNodes：返回一个数组，这个数组由给定元素节点的子节点构成：

var nodeList = node.childNodes;

文本节点和属性节点都不可能再包括不论什么子节点，所以它们的 ChildNodes 属性永远会返回一个空数组。
假设想知道某个元素有没有子节点，能够用 hasChildNodes 方法。

假设想知道某个元素有多少个子节点。能够用 childNodes 数组的 length 属性。

childNodes 属性是一个仅仅读属性。

firstChild -- 获取第一个子节点

firstChild：该属性返回一个给定元素节点的第一个子节点，返回这个节点对象的指针。

var reference = node.firstChild;

文本节点和属性节点都不可能包括不论什么子节点，所以它们的 firstChild 属性永远会返回 null。
某个元素的 firstChild 属性等价于这个元素的 childNodes 节点集合中的第一个节点，即：

var reference = node.ChildNodes[0];

firstChild 属性是一个仅仅读属性。

lastChild：获取最后一个子节点。

nextSibling: 返回一个给定节点的下一个兄弟节点。

previousSibling：返回一个给定节点的上一个兄弟节点。

parentNode：返回一个给定节点的父节点。
parentNode 属性返回的节点永远是一个元素节点，由于仅仅有元素节点才有可能包括子节点。
document 节点的没有父节点。

Document 对象的集合

集合	描写叙述
all[]	提供对文档中全部 html 元素的訪问。
anchors[]	返回对文档中全部 Anchor 对象的引用。
applets	返回对文档中全部 Applet 对象的引用。
forms[]	返回对文档中全部 Form 对象引用。
images[]	返回对文档中全部 Image 对象引用。
links[]	返回对文档中全部 Area 和 Link 对象引用。

Document 对象的属性

属性	描写叙述
body	提供对 <body> 元素的直接訪问。 对于定义了框架集的文档，该属性引用最外层的 <frameset>。
cookie	设置或返回与当前文档有关的全部 cookie。
domain	返回当前文档的域名。
lastModified	返回文档被最后改动的日期和时间。
referrer	返回加载当前文档的文档的 URL。
title	返回当前文档的标题。
URL	返回当前文档的 URL。

Document 对象的方法

方法	描写叙述
close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
getElementById()	返回对拥有指定 id 的第一个对象的引用。
getElementsByName()	返回带有指定名称的对象集合。
getElementsByTagName()	返回带有指定标签名的对象集合。
open()	打开一个流，以收集来自不论什么 document.write() 或 document.writeln() 方法的输出。
write()	向文档写 HTML 表达式 或 JavaScript 代码。
writeln()	等同于 write() 方法，不同的是在每一个表达式之后写一个换行符。