DOM特性/方法

最新推荐文章于 2024-11-03 19:27:37 发布

tanyankai

最新推荐文章于 2024-11-03 19:27:37 发布

阅读量438

点赞数

分类专栏： ajax 文章标签： attributes reference mozilla safari html null

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

❑ DOM的核心： Node 由于DOM是树形结构，所以一个节点被抽象为对象Node，这是DOM的核心对象： Node的种类一共有12种，通过Node.nodeType的取值来确定（为1-12），分为：

Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3) //<![CDATA[ ]]>中括着的纯文本，它没有子节点
Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode
Node.ENTITY_REFERENCE_NODE (5) 
Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>，无子节点
Node.PROCESSING_INSTRUCTION_NODE (7) //PI，无子节点
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点
Node.DOCUMENT_TYPE_NODE (10) //DTD，<!DOCTYPE………..>
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12) //DTD中的Nation定义

❑ Node接口包含的特性/方法节点的属性 nodeName 属性将返回一个字符串，其内容是给定节点的名字。如果节点是元素节点，返回这个元素的名称；如果是属性节点，返回这个属性的名称；如果是文本节点，返回一个内容为#text 的字符串； nodeType 属性将返回一个整数，这个数值代表给定节点的类型 nodeValue 属性将返回给定节点的当前值.如果节点是元素节点，返回null；如果是属性节点，返回这个属性的名称；如果是文本节点，返回文本节点的内容； ownerDocument 指向这个节点所属的文档 attributes 包哈勒代表一个元素的特性的Attr对象；仅用于Element节点 childNodes 所有子节点的列表 firstChild 指向在childNodes列表中的第一个节点 lastChild 指向在childNodes列表中的最后一个节点 nextSibling 指向后一个兄弟节点；如果这个节点就是最后一个兄弟节点，那么该值为null previousSibling 指向前一个兄弟节点；如果这个节点就是第一个兄弟节点，那么该值为null parentNode 返回一个给定节点的父节点 ❑ hasChildNodes() 当childNodes包含一个或多个节点时，返回真 ❑ appendChild(node) 将node添加到childNodes的末尾 ❑ removeChild(node) 将node从childNodes中删除 ❑ insertBefore(newnode refnode) 在childNodes中的refnode之前插入newnode

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

❑ replaceChild(newnode,oldnode)将childNodes中的oldnode替换成newnode

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.replaceChild(para,message);

❑ 获得Node：

/* 通过document对象 */
var oHtml = document.documentElement;


/* 得到<head />和<body /> */
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
/* 可以用这种方式 */
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
/* 也可以使用方法获取数组的索引值 */
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
/* 使用document.body来得到<body /> */
var oBody = document.body;

❑ createElement(element) 创建一个指定标签名创建一个新的元素节点，返回值为指向新建元素节点的引用指针。 eg) var para = document.createElement("p"); document.body.appendChild(para);

❑ createTextNode() 创建一个包含着给定文本的新文本节点，返回一个指向新建文本节点的引用指针： reference = document.createTextNode() 参数为新建文本节点所包含的文本字符串

var message = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(message);
document.body.appendChild(container);

❑ cloneNode() reference = node.cloneNode(deep) 为给定节点创建一个副本，参数为 true 或者 false，true 表示同时复制该节点的子节点，false 则不复制任何子节点。

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);

❑ 检测节点类型通过使用nodeType特性检验节点类型： alert(document.nodeType); //outputs "9" alert(document.documentElement.nodeType); //outputs "1" 这个例子中，document.nodeType返回9，等于Node.DOCUMENT_NODE；同时document. documentElement.nodeType返回1，等于Node.ELEMENT_NODE。也可以用Node常量来匹配这些值： alert(document.nodeType == Node.DOCUMENT_NODE); //true alert(document.documentElement.nodeType == Node.ELEMENT_NODE); //true

这段代码可以在Mozilla 1.0+、Opera 7.0+和Safari 1.0+上正常运行。但是IE不支持这些常量，所以这些代码在IE上会产生错误。

❑ 处理特性即便Node接口已具有attributes方法，且已被所有类型的节点继承，然而，只有Element节点才能有特性。 Element节点的attributes属性其实是NamedNodeMap，它提供一些用于访问和处理其内容的方法： getNamedItem(name) 返回nodeName属性值等于name的节点； removeNamedItem(name) 删除nodeName属性值等于name的节点； setNamedItem(node) 将node添加到列表中，按其nodeName属性进行索引； item(pos) 像NodeList一样，返回在位置pos的节点；请记住这些方法都是返回一个Attr节点，而非特性值。 NamedNodeMap对象也有一个length属性来指示它所包含的节点的数量。当NamedNodeMap用于表示特性时，其中每个节点都是Attr节点，它的nodeName属性被设置为特性名称，而nodeValue属性被设置为特性的值。例如，假设有这样一个元素： <p id="p1" style="color:red">hello world!</p> 假设变量oP包含指向这个元素的一个引用。于是可以这样访问id特性的值： var sId = oP.attributes.getNamedItem("id").nodeValue; //p1 或者 var sId = oP.attributes.item(0).nodeValue; 还可以通过给nodeValue属性赋新值来改变id特性： oP.attributes.getNamedItem("id").nodeValue = "newId"; Attr节点也有一个完全等同于（同时也完全同步于）nodeValue属性的value属性，并且有name属性和nodeName属性保持同步。我们可以随意使用这些属性来修改或变更特性。因为这个方法有些累赘，DOM又定义了三个元素方法来帮助访问特性： getAttribute(name) 等于attributes.getNamedItem(name).value； setAttribute(name, newvalue) 等于attribute.getNamedItem(name).value = newvalue； removeAttribute(name) 等于attributes.removeNamedItem(name) 要获取前面用的<p/>的id特性，只需这样做： var sId = oP.getAttribute("id"); 更改ID: oP.setAttribute("id", "newId");

❑ setAttribute() element.setAttribute(attributeName,attributeValue); 为给定元素节点添加一个新的属性值或是改变它的现有属性 ❑ getAttribute attributeValue = element.getAttribute(attributeName) 返回一个给定元素的一个给定属性节点的值。 ❑ getElementById() element = document.getElementById(ID) 寻找一个有着给定 id 属性值的元素，返回一个元素节点

❑ getElementsByName() 用来获取所有name特性等于指定值的元素： elements = document.getElementsByName(tagName) 返回一个节点集合。

❑ getElementsByTagName() 用于寻找有着给定标签名的所有元素： elements = document.getElementsByTagName(tagName) 返回一个节点集合。

❑ 生成与操作Node createAttribute(name) ：创建一个名为name的属性节点。 createCDATASection(text) ：创建一个子节点为text的CDATA区。 createComment(text) ：创建一个注释内容为text的注释节点。 createDocumentFragment() ：创建一个文档片断（fragment）节点。 createElement(tagName) ：创建一个名为tagName的元素节点。 createEntityReference(name) ：Creates an entity reference node with the given name。 createProcessingInstruction(target, data) ：Creates a PI node with the given target and data。 createTextNode(text) ：创建一个包含text的文本节点。其中最重要的方法是createElement(),createDocumentFragment(), create TextNode()。

/*使用createElement(),createTextNode(),appendChild()动态添加节点*/
function createMessage(){
 var op = document.createElement("p");
 var oText = document.createTextNode("hello world!");
 op.appendChild(oText);
 document.body.appendChild(op);
}

❑ 使用createDocumentFragment()

//通常做法
var arrText = ['first', 'second', 'third'];
for(var i=0; i<arrText.length; i++){
	var op = document.createElement('p');
	var oText = document.createTextNode(arrText[i]);
	op.appendChild(oText);
	document.body.appendChild(op);
}

//使用documentFragment
var arrText = ['first', 'second', 'third'];
var oFragment = document.createDocumentFragment();
for(var i=0; i<arrText.length; i++){
	var op = document.createElement('p');
	var oText = document.createTextNode(arrText[i]);
	op.appendChild(oText);
	oFragment.appendChild(op);
}
document.body.appendChild(oFragment);

通过DocumentFragment的方式效率更高。

❑ HTML DOM：使用DOM的核心方法是针对所有XML的，针对HTML DOM有特殊的方法，如使用DOM core：oImg.setAttribute("src", "picture.gif"); 使用HTML DOM：oImg.src = "picture.jpg";