DOM方法与属性

DOM方法

• 创建节点
  • createElement：创建元素节点
  • createTextNode：创建文本节点
• 复制节点
  • cloneNode
• 插入节点
  • appendChild：给元素节点追加一个子节点
  • insertBefore：把一个给定节点插入到一个给定元素节点的前面
• 删除节点
  • removeChild：从一个给定元素里删除一个子节点
• 替换节点
  • replaceChild：把一个给定父元素里的一个子节点，替换为另一个节点
• 设置属性节点
  • setAttribute：为给定元素节点添加一个新的属性值或是改变它的现有属性值
• 查找节点
  • getAttribute：返回一个给定元素节点的一个给定属性的值
  • getElementById：寻找一个有着给定id属性值的元素
  • getElementsByTagName：寻找有着给定标签名的所有元素
  • hasChildNodes：用来检查一个给定元素是否有子节点

DOM属性

• 节点的属性
  • nodeName：返回一个字符串，其内容是给定节点的名字，只读
  • nodeType：返回一个整数，代表给定节点的类型，一共有12种，1：元素节点，3：文本节点
  • nodeValue：返回给定节点的当前值
• 遍历节点树
  • childNodes：返回一个数组，这个数组由给定元素节点的子节点构成
  • firstChild：返回一个给定元素节点的第一个子节点
  • lastChild：返回一个给定元素节点的最后一个子节点
  • nextSibling：返回一个给定节点的下一个同一个父节点的节点
  • parentNode：返回给定节点的父节点
  • previousSibling：返回一个给定节点的前一个同一个父节点的子节点

---

DOM 方法：

创建节点：以下DOM方法的基本用途是创建新节点。

• createElement()

　　createElement()方法所返回的引用指针指向一个节点对象。它是一个元素节点，所以它的nodyType属性值将等于1；

　　varr para = document.createElement("p");

在这个例子里，para.nodeType返回值将是1。para.nodeName返回值将是p或P.

 

　　用 createElement()方法创建出来的新元素节点不会被自动添加到文档里。新节点没有nodeParent属性，它只是一个存在于Javascript上下文里的DocumentFragment对象。如果想把这个DocumentFragment对象添加到你的文档里，则需要使用appendChild()或insertBefore()方法（参见“插入节点”）或replaceChild()方法（参见“替换节点”）；

 

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

　　document.body.appentdChild(para);

这个例子将创建一个p元素，并把这个新创建的元素追加为body元素的lastchild子节点。

 

你可以在任何时候对新创建出来的元素使用其他DOM方法。比如说，你随时都可以对新元素的任意属性进行设置（参见”处理节点“），即使在把这个元素插入文档之前也可以这样做。

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

　　para.setAttribute("title","My paragraph");

　　document.body.appendChild(para);

当然，也完全可以先把新元素插入文档，再对它的属性进行设置：

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

　　document.body.appendChild(para);

　　para.setAttribute("title","My paragraph");

 

• createTextNode()

　　createTextNode()方法将创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点的引用指针；

　　　　reference = document.createTextNode(text)

　　这个方法只有一个参数：新建文本节点所包含的文本字符串；

　　　　reference = document.createTextNode("hello world")

 

　　createTextNode() 方法所返回的引用指针指向一个节点对象，它是一个文本节点，所以它的nodeType属性值将等于3；

　　　　var message = document.createTextNode("hello world");

　　在这个例子里，message.nodeType返回的值将是3。message.nodeName返回的值将是#text。

 

　　用createTextNode()方法创建的新文本节点不会被自动添加到文档里，新节点没有parentNode 属性。如果想把新创建的文本节点添加到你的文档里，则需要使用appendChild()或insertBefore()方法（参加”插入节点“）或replaceChild()方法（参加“替换节点”）；

 

　　var message = document.createTextNode("hello world");

　　var cOntainer= document.getElementById("intro");

　　container.appendChild(message);

这个例子将创建一个包含文本“hello world”的文本节点，并把这个文本节点追加到id属性值等于"intro"的那个元素。

 

createTextNode()经常与createELement()方法配合使用。以下语句将创建一段HTML内容并把它插入文档：

　　var message = document.createTextNode("hello world");

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

　　container.appendChild(message);

　　document.body.appendChild(container);

在这个例子里，第一条语句创建了一个包含着文本“hello world”的文本节点，并把由createTextNode()方法返回的引用指针赋值给了变量message。第二条语句用createElement()方法创建了一个p元素，并将其引用指针赋值给了变量container。第三条语句用appendChild()方法把message文本节点插入了container元素节点。第四条语句把刷新后的container元素追加给了文档的body元素。

 

复制节点

　　DOM 提供了一个用来复制节点的方法。

• 　　cloneNode()

　　cloneNode()方法将为给定节点创建一个副本。这个方法的返回值是一个指向新建克隆节点的引用指针：

　　　　reference = node.cloneNode(deep)

　　这个方法只有一个布尔类型的参数，它的可取值只能是true或false。这个参数决定着是否要把复制节点的子节点也一同复制到新建节点里去。如果这个参数的值是true，新节点将包含着与被复制节点完全一样的子节点。如果这个参数的值是false，新节点将不包含任何子节点——如果被复制节点是一个元素节点，这意味着包含在被复制节点里的所有文本将不会被复制（那些文本是一个子节点），但属性节点将被复制：

　　reference = node.cloneNode(true)

　　reference = node.cloneNode(false)

cloneNode()方法所返回的引用指针指向一个节点对象，新节点有着与被复制节点完全一样的nodeType和nodeName属性值；

 

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

　　var newpara = para.cloneNode(false);

在这个例子里，先创建了一个新的元素节点para，然后通过复制para元素节点又创建了一个新的元素节点newpara。para.nodeType返回的值将是1（一个元素节点）, newpara.nodeType返回的值也将是1。

 

再来看一个例子：

　　var message = document.createElement("hello world");

　　var newmessage = message.cloneNode(false);

在此例子中，先创建了一个新的文本节点message，如何通过复制message文本节点又创建了一个新的文本节点newmessage。message.nodeType返回的值将是3（一个文本节点），newmessage.nodeType返回的值也将是3；message.nodeName返回的值将是“#text”，newmessage.nodeName返回的值也将是“#text” .

 

在下面的例子里，给定节点和它的子节点都被复制到了新节点里：

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

　　var message = document.createTextNode("hello world");

　　para.appendChild(message);

　　var newpara = para.cloneNode(true);

因为在发出para.cloneNode()调用时传递的参数是true，所以新创建的元素节点newpara也将有一个包含着文本“hello world”的子文本节点。

 

下面这段代码在复制节点时没有把子节点包括进来：

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

　　var message = document.createTextNode("hello world");

　　para.appendChild(message);

　　var newpara = para.cloneNode(false);

与被复制的para节点一样，新节点newpara也是一个元素节点。para节点还有一个包含着文本“hello world”的子文本节点，但newpara节点没有任何子节点。

 

用cloneNOde()方法复制出来的新节点不会被自动添加到文档里。新节点没有nodeParent属性。如果想把新节点添加到你的文档里，则需使用appendChild()或insertBefore()方法（参见“插入节点”）或replaceChild()方法（“替换节点”）：

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

　　var message = document.createTextNode("hello world");

　　para.appendChild(message);

　　document.body.appendChild(para);

　　var newpara = para.cloneNode(true);

　　document.body.appendChild(newpara);

在此例中，第一条语句创建了一个para文本段元素，第二条语句创建了一个message文本节点，第三条语句把message文本节点插入了para元素节点，第四条语句把para插入文档的body元素。接下来，第五条语句调用cloneNode()方法从para节点（以及它的子节点）复制出了一个新的元素节点newpara，第六条语句把newpara插入文档的body元素。最后的结果是两个相同的文本段被插入了文档。

请注意：如果被复制元素有一个独一无二的id属性值，千万不要忘记对复制出来的新元素的id属性值进行修改。在同一个文档里，不同元素的id属性值必须各不相同。

 

插入节点

可以用来把节点插入文档的DOM方法有两种。

• appendChild()

appendChild()方法将给元素节点追加一个子节点：

　　reference = elment.appendChild(newChild)

如上所示，给定子节点newchild将成为给定元素节点element的最后一个子节点。这个方法的返回值是一个指向新增子节点的引用指针。

这个方法通常与用来创建新节点的createElement()和createTextNode()方法配合使用。

 

在下面的例子里，第一条语句用createElement()方法创建了一个para文本段元素，第二条语句用createTextNode()方法创建了一个message文本节点，第三条语句用appendChild()方法把message文本节点插入了para元素节点：

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

　　var message = document.createTextNode("hello world");

　　para.appendChild(message);

接下来，再次使用appendChild()方法，但这次是把para元素（以及它的子节点message）插入文档的结果：

　　document.body.appendChild(para);

上面这条语句将把para元素追加给文档中的body元素。

新节点可以被追加给文档中的任何一个元素。在下例中，我们把一个新的文本节点追加给了当前文档中那个id属性值是headline的元素：

　　var message = document.createTextNode("hello world");

　　var cOntainer= document.getElementById("headline");

　　container.appendChild(message);

现在，container元素的lastChild属性将被刷新为包含着文本"hello world"的新增文本节点。

 

appendChild()方法不仅可以用来追加新创建的元素，还可以用来挪动文档中现有元素。

 

在下面的例子里，第一条语句将去寻找id属性值是fineprint的元素，第二条将去寻找id属性值是content的元素，第三条语句将把fineprint元素从它的当前位置切下来并追加到content元素的末尾：

var message = document.getElementById("findeprint") ;

var cOntainer= document.getElementByid("content");

container.appendChild(message);

 注意，id属性值是findeprint的元素将先从文档树上被删除，然后再作为content元素的最后一个子节点被重新插入到新位置。

 

• insertBefore()

 

 insertBefore()方法将把一个给定节点插入到一个给定元素节点的给定子节点的前面，它返回一个指向新增子节点的引用指针：

reference = element.inserBefore(newNode,targetNode)

如上所示，节点newNode将被插入到元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个子节点。如果targetNode节点未给出，newNode节点将被追加为element元素的最后一个子节点——从效果上看，这相当于调用appentChild()方法。

inserBefore()方法通常与createElement()和createTexNode()方法配合使用，以便把新创建的节点插入到文档树里。

在下例中，某个文档有个id属性值是content的元素，这个元素又包含着一个id属性值是fineprint的元素。我们将用createElement()方法创建一个新的文本段元素，再把新建元素插入到content元素所包含的fineprint元素的前面：

  var cOntainer= document.getElementByid("content");

  var message = document.getElementByid("fineprint");

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

  container.inserBefore(para,message);

 如果被插入的元素本身还有子节点，那些子节点也将被插入到目标节点的前面：

  var cOntainer= document.getElementByid("content");

 

  var text = document.createTextNode("Here comes the fineprint");

  para.appendChild(text);

  container.inserBefore(para,message);

 inserBefore()方法不仅可以用来插入新创建的元素，还可以用来挪动文档中的现有节点。

在下例中，某个文档有个id属性值是content的元素，这个元素又包含着一个id属性值是fineprint的元素。在这个文档的其他地方还有一个id属性值是headline的元素。在找这三个元素之后，最后一条语句把headline元素移到了contentd的元素所包含的fineprint元素的前面。

var cOntainer= document.getElementByid("content");

  var annoucement = document.createElement("headline");

 

  container.inserBefore(annoucement,message);

 注意，id属性值是headline的元素将先从文档树上被删除，然后再被重新插入到新位置，即content元素所包含的fineprint元素的前面。

 

删除节点

DOM提供了一个用来删除节点的方法。

 

• removeChild()

 

  removeChild()方法将从一个给定元素里删除一个子节点；

  reference = element.removeChild(node)

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

 当某个节点被removeChild方法删除时，这个节点所包含的所有子节点将被同时被删除。

在下例中，id属性值是content的元素还包含着一个id属性值是fineprint的元素。我们将用removeChild()方法从content元素里把fineprint元素删掉： 

  var cOntainer= document.getElementByid("content");

 如果想删除某个节点，但不知道它的父节点是哪一个，parentNode属性可以帮上大忙：

  var message = document.getElementByid("findprint");

  var cOntainer= message.parentNode;

  container.removeChild(message);

 如果想把某个节点从文档的一个部分移动到另一个部分，你不必使用removeChild()方法。appentChild()和insertBefore()方法都自动地先删除这个节点再把它重新插入到新位置去。

 

替换节点 

  DOM 提供了一个用来替换文档树里的节点的方法。

 

• replaceChild() 

 

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

  reference = element.replaceChild(newChild,oldChild)

 oldChild节点必须是element元素的一个子节点。它的返回值是一个指向 已被替换的那个子节点的引用指针。

 在下例中，id属性值是content的元素还包含着一个id属性值是fineprint的元素。我们将用createElement方法创建一个新的文本段元素，再用replaceChild()方法把fineprint元素替换为那个新创建的元素：

  var cOntainer= document.getElementByid("content");

  container.replaceChild(para,message);

 如果被插入的元素本身还有子节点，则那些子节点也被插入到目标节点前。

replaceChild()方法也可以用文档树的现有节点去替换另一个现有节点。如果newchild节点是文档树上的一个现有节点，replaceChild()方法将先删除它再用它去替换oldChild节点。

在下例中，replaceChild方法将用id属性值是headline的元素去替换content元素所包含的id属性值是fineprint的那个元素。

   var cOntainer= document.getElementByid("content");

  var cOntainer= document.getElementByid("content");

  container.appendChild(para);

DOM还提供了一个与setArrtibute()方法作用刚好与它相反的getAttribute()方法，后者可以用来检索某个属性的值 。

 

查找节点

DOM 提供了好几个用来在文档树上定位节点的方法。

 

• getAttribute()

 

getAttribute()方法将返回一个给定元素的一个给定属性节点的值：

attributeValue = element.getAttribute(attributeName) 

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

 下面的例子将把id属性值是fineprint的元素的title属性提取出来，并保存到titletext变量里：

var message = document.getElementByid("fineprint"); 

  var titletext = message.getAttribute("title");

在下例中先提取title的属性的值，再用这个值创建一个新的文本节点，然后把它追加到fineprint元素的末尾：

  var message = document.getElementByid("fineprint"); 

  var newtext = document.createTextNode("titletext");

  message.appendChild(titletext);

 DOM还提供了一个与getAttribute()方法作用刚好与它相反的setAttribute()方法，后者可以用来设置某个属性的值。

 

 

• getElementByid() 

 

 getElementByid()方法的用途是寻找一个有着给定id属性值的元素：

  element = document.getElementByid(id)

 这个方法将返回一个有着给定id属性值的元素节点。如果不存在这样的元素，它返回null。这个方法只能用于document对象。

getElementByid()方法的元素节点是一个对象，这个对象有着nodeName、nodeType 、parentNode、childNodes等属性。

 下面的例子将把id属性值是fineprint的元素提取出来，并保存到message变量里。message元素节点的父节点也是一个元素，我们把它提取到变量container里：

  var message = document.getElementByid("fineprint");

  var cOntainer= message.parentNode;

如果你打算提取的元素有一个id，则用getElementByid()方法来检索这个元素将是最简单和最快捷的办法。找到这个元素后，就可以对它使用setAttriibute ()、cloneNode()或appendChild()等方法了。

在下例中先找出id属性值是fineprint的元素，并把它保存到message变量里，然后把这个元素的title属性刷新为this is important:

  var message = document.getElementByid("fineprint");

  message.setAttribute("title","this is important");

 在同一个文档里，不同元素的id属性值必须各不相同，如果一个以上的元素有着同样的id，getElementByid()方法的行为将无法预料。

 

• getElementByTagName()

 

  getElementByTagName()方法的用途是寻找有着给定标签名的所有元素：

  elements = document.getElementByTagName(tagName)

 这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。这个数组里的每个元素都是一个对象，它们都有着nodeName、nodeType、parentNode、childNodes等属性。

下面这个例子将把当前文档里的所有文本段元素（p元素）全部检索出来。getElementByTagName ()方法所返回的节点集合的length属性将被保存到变量howmany里：

var paras = document.getElementByTagName("p"); 

var howmany = paras.length;

在getElementByTagName()方法成功返回之后，比较常见的后续手段是用一个for循环去遍历这个方法所返回的节点集合里的各个元素。在for循环里，我们可以用setAttribure ()、cloneNode()或appendChild()等方法对各有关元素进行查询和处理。

下面的这个例子将遍历当前文档里的所有文本段元素，并将其title属性全部设置为空字符串：

  var paras = document.getElementByTagName("p");

for (var i=0;i

paras[i].setAttribute("title",""); 

  }

在上例中，变量paras的数据类型是nodeList。这个集合里的每个元素可以像其他任何一个数组那样进行访问：paras[0]、paras[1]、paras[2]，等等。当然，也完全可以使用item()方法：paras.item(0)、paras.itme(1)、paras.item(2)，等等。

getElementByName方法不必非得用在整个文档上。它可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

在下例中，在当前文档里包含着一个id属性值是content的元素。 为了找出content元素所包含的所有文本段元素，我们把getElementByTagName()方法用在了content元素上：

  var cOntainer= document.getElementById("content");

  var paras = container.getElementByTagName("p");

var howmany = paras.length; 

 执行完上面这些语句后，变量howmany的值将是包含在content元素里的所有文本段元素的总个数，而不是整个文档里的文本段总个数。

 

• hasChildNodes

 

hasChildNodes方法可以 用来检查一个给定元素是否有子节点：

booleanValue = element.hasChildNodes 

 这个方法将返回一个布尔值true或false。如果给定元素有子节点，hasChildNodes方法将返回true;否则返回false。

文本节点和属性节点都不可能再包含任何子节点，所以对这两类节点使用hasChildNodes方法的返回值将永远是false。

这个方法通常与if语句配合使用。下面这个例子先找出id属性值是fineprint的那个元素，并把它保存到变量message里。如果这个元素有子节点，就把它们以一个数组保存到变量children里去：

var message = document.getElementById("fineprint"); 

  if (message.hasChildNodes){

var children = message.childNodes;

}

hasChildNodes 方法无法返回某给定元素的子节点——子节点可以用这个元素的childNodes属性去检索。如果hasChildNodes方法返回的是false，childNodes属性将是一个空数组。

同样道理，如果hasChildNodes方法返回false，给定元素的firstchild和lastchild属性也将为空。

 

DOM 属性

下面是DOM树里的各种节点的一些属性

 

 节点的属性

 

•  nodeName

 

  nodeName属性将返回一个字符串，其内容是给定节点的名字

name = node.nodeName 

如果给定节点是一个元素节点，nodeName属性将返回这个元素的名字：这在效果上相当于tagName属性。

如果给定节点是一个属性节点，nodeName属性将返回这个属性的名字。

如果给定节点是一个文本节点，nodeName属性将返回一个内容为#text的字符串

nodeName属性是一个只读属性——只能对它进行查询（读），不能直接对它进行设置（写）。

 

• nodeType

 

  nodeType 属性将返回一个整数，这个数值代表着给定节点的类型：

integer = node.nodeType

nodeType 属性有12种可取值。nodeType 属性所返回的整数值对应着以下12种节点类型之一：

(1) ELEMENT_NODE

(2) ATTRIBUTE_NODE

(3) TEXT_NODE

(4) CDATE_SECTION_NODE

(5) ENTITY_REFERENCE_NODE

(6) ENTITY_NODE

(7) PROCESSING_INSTRUCTION_NODE

(8) COMMENT_NODE

(9) DOCUMENT_NODE

(10)DOCUMENT_TYPY_NODE

(11)DOCUMENT_FRAGMENT_NODE

(12)NOTATION_NODE 

在这12种节点类型当中，前3种是最重要的。WEB上绝大多数DOM脚本都需要与元素节点、属性节点、文本节点打交道。

nodeType属性通常与if语句配合使用，以确保不会在错误的节点类型上执行无效或非法的操作。在下例中，某个函数只有一个名为mynode的参数，这个参数可以是文档中的任何一个元素。这个函数将为该元素添加一个取值为this is importan 的title属性。在此之前，它先检查mynode参数的nodeType属性，以确保这个参数所代表的节点确实是一个元素节点：

function addTitle(mynode){

if (mynode.nodeType==1) {

mynode.setAttribute("title","this is improtant"); 

  }

}

 nodeType属性是一个只读属性。

 

• nodeValue 

 

  nodeValue 属性将返回给定节点的当前值：

value = node.nodeValue

这个属性将返回一个字符串。

如果给定节点是一个属性节点，nodeValue属性将返回这个属性的值。

  message.nodeValue = "this won't work";

下面这个例子有可能可以工作，它试图为一个元素节点的第一个子节点设置一个值。 只要这个第一个子节点是一个文本节点，新值就可以设置成功：

var message = document.getElementById("fineprint"); 

  message.firstChild.nodeValue = "this might work";

 下面这个例子肯定可以工作。这里增加了一项测试以检查fineprint元素节点的第一个子节点是否为文本节点：

var message = document.getElementById("fineprint"); 

  if (message.firstChild.nodeType==3){

  message.firstChild.nodevalue = "this will work";

  }

如果需要刷新某个文本节点的值，nodeValue属性提供了最简单的机制。如果需要刷新某个属性节点的值，通过这个属性节点的父节点和setAttribute()方法设置往往更简明易行。

 

遍历节点树

从以下属性读取出来的信息可以让我们了解相邻节点之间的关系。

 

• childNodes

 

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

nodeList = node.childNodes

从这个属性所返回的数组是一个nodeList集合，这个nodeList集合里的每个节点都是一个节点对象。这些节点对象都有着nodeType、nodeName、nodeValue等常见的节点属性。

文本节点和属性节点都不可能再包含 任何子节点，所以它们的childNodes属性永远会返回一个空数组。

如果只想知道某个元素有没有子节点，可以使用hasChildNodes()方法。

如果想知道某个元素有多少个子节点，请使用childNodes数组的length属性：

node.childNodes.length

即使某个元素只有一个子节点，childNodes 属性也将返回一个节点数组而不是返回一个单个的节点。此时，childNodes 数组的length 属性值将是1。比如说，如果某个网页上的document元素只有html元素这个子节点，那么document.childNodes[0].nodeName的值将是HTML。

childNodes 属性是一个只读属性。如果需要给某个元素增加子节点，可以使用appendChild()或insertBefore() 方法；如果需要删除某个元素的子节点，可以使用removeChild()方法；在使用这几种方法增、减某个元素的子节点时，这个元素的childNodes属性将自动刷新。

 

• firstChild

 

  firstChild 属性将返回一个给定元素节点的第一个子节点；

reference = node.firstChild

这个属性返回一个节点对象的引用指针。这个节点对象都有着nodeType、nodeName、nodeValue等常见的节点属性。

文本节点和属性节点都不可能再包含任何子节点，所以它们的firstChild属性永远会返回null。

某个元素的firstChild 属性等价于这个元素的childNodes节点集合中的第一个节点：

reference = node.childNodes[0]

如果只是想知道某个元素有没有子节点，可以使用hasChildNodes方法。如果某个节点没有任何子节点，它的firstChild属性将返回null。

firstChild属性是一个只读属性。

 

• lastChild 

 

  lastChild 属性将返回一个给定元素节点的最后一个子节点：

reference = node.lastChild

这个属性返回一个节点对象的引用指针。这个节点对象都有着nodeType、nodeName、nodeValue等常见的节点属性。

 

 

 

 

如果只是想知道某个元素有没有子节点，可以使用hasChildNodes方法。如果某个节点没有任何子节点，它的lastChild属性将返回null。

lastChild属性是一个只读属性。

 

• nextSibling 

 

  nextSibling 属性将返回一个给定节点的下一个子节点：

reference = node.nextSibling

这个属性返回一个节点的引用指针。这个节点对象都有着nodeType、nodeName、nodeValue等常见的节点属性。 

如果给定节点的后面没有同属一个父节点的节点，它的nextSibling属性将返回null。

nextSibling 属性是一个只读属性。

 

• parentNode 

 

parentNode 属性将返回一个给定节点的父节点

  reference = node.parentNode

这个属性返回一个节点的引用指针。这个节点对象都有着nodeType、nodeName、nodeValue等常见的节点属性。  

parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。唯一的例外是document节点，它没有父节点。换句话说，document节点的parentNode属性将返回null。

parentNode 属性是一个只读属性。

 

• previousSibling

 

  previousSibling 属性将返回一个给定节点的前一个子节点；

reference = node.previousSibling

 

 

如果给定节点的前面没有同属一个父节点的节点，它的previousSibling属性将返回null。

previousSibling属性是一个只读属性。