你的位置:首页 > Java教程

[Java教程]DOM元素节点ELEMENT


定义

  Element元素用于表现

 

特征

  nodeType:1
  nodeName:元素的大写标签名
  nodeValue:null
  parentNode:Document或Element
  子节点可能是Element、Text、Comment、ProcessingInstruction、CDATASection、ENtityReference
  [注意1]要访问元素的标签名可以使用nodeName,也可以使用tagName属性,这两个属性会返回相同的值

<ul id="list">  <li >0</li>  <li id="test">test</li>  <li >2</li></ul><script>var oList = document.getElementById('list');var oTagTest = oList.nodeName;var oNodeTest = oList.tagName;//1 "UL" null <body> #text(在IE8-浏览器下不支持空白文本节点)console.log(oList.nodeType,oList.nodeName,oList.nodeValue,oList.parentNode,oList.childNodes[0])console.log(oTagTest,oNodeTest,oTagTest == oNodeTest);//UL UL true</script>  

  [注意2]在HTML中,标签名始终以全部大写表示;而在

if(element.tagName.toLowerCase() == "div"){  //TODO  }

 

HTML元素

  所有的HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示,HTMLElement类型直接继承自Element并添加了以下5个属性,且这些属性是可读可写的。
  id:元素在文档中的唯一标识符
  title:有关元素的附加说明信息,一般通过工具提示条显示出来
  lang:元素内容的语言代码,很少使用
  dir:语言的方向,ltr(left to right)从左到右 或 rtl(right to left)从右到左,也很少使用
  className:与元素的class特性对应,即为元素指定的CSS类。

<div id="boxId" title="boxTitle" lang="en" dir="rtl" >123</div><script>var oBox = document.getElementById('boxId');console.log(oBox.className,oBox.id,oBox.title,oBox.lang,oBox.dir)//boxClass boxId boxTitle en rtl//[注意]如果text-align和dir同时设置的话,以text-align设置为值为准oBox.dir = "ltr";console.log(oBox.dir);//ltr</script>

 

创建元素

  【createElement()】

  使用document.createElement()方法可以创建新元素。这个方法接受一个参数,即要创建元素的标签名,这个标签名在HTML文档中不区分大小写,而在

var oDiv = document.createElement("div");//#documentconsole.log(oDiv.ownerDocument);

  IE8-浏览器可以为这个方法传入完整的元素标签,也可以包含属性。

var oDiv = document.createElement('<div id="box"></div>');document.body.appendChild(oDiv);console.log(oDiv);

  利用这种方法可以避开IE7-浏览器在动态创建元素的某些问题。
    [a]不能设置动态创建的<iframe>元素的name特性
    [b]不能通过表单的reset()方法重设动态创建的<input>元素
    [c]动态创建的type特性值为"reset"的<button>元素重设不了表单
    [d]动态创建的一批name相同的单选按钮彼此毫无关系。name值相同的一组单选按钮本来应该用于表示同一选项的不同值,但动态创建的一批这种单选按钮之间却没有这种关系。

var iframe = document.createElement("<iframe name = 'myframe'></iframe>");var input = document.createElement("<input type='checkbox'>);var button = document.createElement("<button type = 'reset'></button>");var radio1 = document.createElement("<input type='radio' name ='choice' value = '1'>");var radio2 = document.createElement("<input type='radio' name ='choice' value = '2'>");

 

元素的子节点

  元素可以有任意数目的子节点和后代节点,因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点,这些子节点可能是元素、文本、注释、处理指令节点。但不同浏览器在处理空白文本节点上有差异。

<ul id="list">  <li ></li>  <li ></li></ul><script>var oList = document.getElementById('list');//IE8-浏览器返回2,其他浏览器返回5。因为IE8-浏览器子节点中不包含空白文本节点console.log(oList.childNodes.length)</script>

  【解决】只获取元素节点的兼容写法

<ul id="list">  <li ></li>  <li ></li></ul><script>var oList = document.getElementById('list');var children = oList.childNodes;var num = 0;for(var i = 0; i < children.length; i++){  if(children[i].nodeType == 1){    num++;  }}console.log(num);  </script>