JS高级程序设计--读书笔记(DOM对象)

1,node类型 <1>JavaScript中的所有节点类型都继承自NODE类型。每个节点有一个nodeType属性，用于表明该节点的类型，节点类型如下： Node.ELEMENT_NODE(1),Node.ATTRIBUTE_NODE(2),Node.TEXT_NODE(3),Node.CDATA_SECTION_NODE(4) 所以判断某个节点的类型，可通过如下代码确定： if(someNode.nodeType==1){ alert("node is a element");//跨浏览器兼容 } (1)nodeName和nodeValue属性 要了解节点具体，可以使用NodeName和nodeValue这两个属性。--对于元素节点来说，nodeName保存元素标签名，nodeValue为null。 (2)节点关系 --每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，(但不是数组，虽然有length属性)。NodeList对象的独特处在于基于DOM结构动态执行查询的结果。 --每个节点都有一个ParentNode属性，该属性指向文档树的父节点。父节点的firstChild和LastChild属性分别指向childNodes列表中的第一个和最后一个元素。 节点列表中的每个元素也有previousSibling和nextSibling属性，可以访问同一列表的其他节点。 (3)节点操作 appendChild()--用于向childNodes列表的末尾添加一个节点，返回值为新增的节点。 insertBefore()--将节点插入childNodes列表中某个特定的位置。 replaceChild(要插入的节点，要替换的节点) removeChild()--移除节点 2,Element类型 (1)html元素 htmlElement类型直接继承自element并添加了一些属性。如下： <div id="myDiv" class="bd" title="body"></div> var div=document.getElementById("myDiv"); alert(div.id);//myDiv alert(div.className)//bd (2)取得属性 操作属性的DOM方法主要有三个，分别是getAttribute(),setAttribute()和removeAttribute(). 如上例子， alert(div.getAttribute("id"));//myDiv attributes属性： element类型是使用attributes属性唯一一个DOM节点类型，attribute属性中包含一个NameNodeMap，可以以下标方式获取。 var id=element.attribute["id"].nodeValue; (3)创建元素 Document.createElement()方法。 通过该方法可以创建新元素，并为它添加属性。 var div=document.createElement("div"); div.id="Myid"; div.className="box"; 3,Text元素 创建文本节点 document.createTextNode()创建文本节点，参数是要插入节点的文本。如下： var element=document.createElement("div"); var textNode=document.createTextNode("hello world"); element.appendChild(textNode); //一般情况下，一个元素只有一个文本节点。