DOM方法与属性
DOM方法
下列方法是DOM Core的组成部分。这不是全体DO方法的完整清单。这里只列出了最有用的方法。
创建节点
以下的DOM方法的基本用途是创建新节点。
1、createElement（）
将按照给定的标签创建一个新的节点元素。这个方法的返回值是一个纸箱新建元素节点的引用指针：
reference=document.createElement(element)
这个方法只有一个参数：将被处案件的元素的名称。这是一个字符串：
reference=document.createElement("p")
用createElement（）方法创建出来的新元素节点不会被自动添加到文档中。新节点没有parentNode属性，他只是一个存在于JS上下文里的DocumentGragment对象。如果想把这个DocumentGragment对象添加到你的文档里，则需要使用appendChild（）或insertBefore（）方法或者replaceChild（）方法。如：
var para=document.createElement("p");
dicument.body.appendChild(para);
你可以在任何时候对新创建的使用其他的DOM方法，比如对新元素的任意属性进行设置：
var para=document.createElement("p");
para.setAttribute("title","my passage");
dicument.body.appendChild(para);
2、createTextNode()方法
将创建一个包含给定文本的新文本节点。返回值是指向新建文本节点的引用指针：
reference=document.createTextNode(text)
一个参数：创建文本节点所包含的文本字符串：
reference=document.createTextNode(“Hello World”);
用createTextNode（）方法创建出来的新元素节点不会被自动添加到文档中。新节点没有parentNode属性，他只是一个存在于JS上下文里的DocumentGragment对象。如果想把这个DocumentGragment对象添加到你的文档里，则需要使用appendChild（）或insertBefore（）方法或者replaceChild（）方法。如：
var message=document.createTextName("Hello World");
var container=document.getElementById(“intro”);
container.appendChild(container);//将文本追加到id属性值等于“intro”的那个元素。
createElement()经常与createTextNode()方法配合使用。创建一段HTML内容并把它插入到文档中：
var message=document.createTextName("Hello World");
var para=document.createElement("p");
para.appendChild(message);
document.body.appendChild(para);
复制节点
DOM提供了一个用来复制节点的方法。
cloneNode()方法
将为给定节点创建副本。返回值是一个指向新建克隆节点的引用指针：
reference=document.colneNode(deep);
参数是一个布尔类型的，可取值true或false。这个参数决定着是否要把被复制节点的子节点也一同复制到新建节点里去。如果这个参数值是true，新节点将包含着与被复制节点完全一样的子节点。如果参数值是false，新节点将不包含任何子节点——如果被复制节点是一个元素节点，这意味着包含在被复制节点里的所有文本将不会被复制（那些文本是一个子节点），但属性节点将被复制。
cloneNode（）方法所返回的引用指针指向一个节点对象。新节点有着被复制节点完全一样的nodeType和nodeName属性值。
在下列例子中，给定节点和它的子节点都被复制到了新节点里：
var para=document.createElement("p");
var message=document.createTextNode("hello world");
para.appendChild(message);
var newpara=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);
性创建的元素节点newpara没有任何的子节点。
用cloneNode（）方法创建出来的新元素节点不会被自动添加到文档中。新节点没有parentNode属性，他只是一个存在于JS上下文里的DocumentGragment对象。如果想把这个DocumentGragment对象添加到你的文档里，则需要使用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);
注意：如果被复制的元素有一个独一无二的id属性值，千万不要忘记对复制出来的新元素的id属性值进行修改。在同一文档中，不同元素的id属性值必须各不相同。
插入节点
可以用来把节点插入文档的DOM方法有两种。
1、appendChild()
将给元素节点追加一个子节点。返回值是一个指向新增子节点的引用指针：
reference=element.appendChild(newChild);//给定子节点newChide将成为给定元素节点element的最后一个子节点。
这个方法通常与用来创建新元素节点的createElement()和createTextNode()方法相配合使用：
var para=document.createElement("p");
var message=document.createTextNode("hello world");
para.appendChild(message);
新节点可以被追加到文档里的任何一个元素。如下，把一个新的文本节点追加给了当前文档中那个id属性值是headline的元素：
var message=document.createTextNode("hello world");
var container=document.getElementById("headline");
container.appendChild(message);//container元素的lastChild属性将被刷新为包含着文本“hello world”的新增文本节点
appendChild（）方法不仅可以用来追加新创建的元素，还可以用来挪动文档中的元素：
var message=document.getElementById("fineprint");
var container=document.getElementById("content");
container.appendChild(message0;
注意：id属性值是fineprint的元素将先从文档树上被删除，然后再作为content元素的最后一个子节点被重新插入到新位置。
2、insertBefore()
将把一个给定节点插入到一个给定元素节点的给定子节点的前面。返回值是一个指向新增节点的引用指针：
reference=element.insertBefore(newNOde,targetNode)
如上所示，节点newNode将被插入元素节点element并出现在targetNode的前面。如果targetNode未给出，newNode节点就将被追加为element元素的最后一个子节点——从效果上看，这相当于调用了appendChild()方法。
这个方法通常与用来创建新元素节点的createElement()和createTextNode()方法相配合使用，以便把新建的节点插入到文档树里。
如果被插入的元素本身还有子节点，那些子节点也将被插入到目标节点的前面：
var container=document.getElementById("content");
var message=document.getElementById("fineprint");
var para=document.createElement("p");
vra text=document.createTextNode("hello world");
para.appendChild(text);
container.insertBefore(para,message);
insertBefore()方法不仅可以用来插入新创建的元素，还可以用来挪动文档中的现有节点：
var container=document.getElementById("content");
var message=document.getElementById("fineprint");
var announcement=document.getElementById("headline");
container.insertBefore(announcement,message);//把headline元素移动到content的元素所包含的fineprint元素的前面
注意：id属性值是headline的元素将先从文档树上被删除，然后再重新插入到新位置，即content元素所包含的fineprint元素的前面。
删除节点
DOM提供了一个用来删除节点的方法。
removeChild()
将从一个给定元素里删除一个子节点。返回值是一个指向已被删除的子节点的引用指针：
reference=element,removeChild(node)
当某个节点被removeChild（）方法删除时，这个节点所包含的所有子节点将同时被删除。
在下例中，id属性值是content的元素还包含着一个id属性值是fineprint的元素：
var container=document.getElementById("content");
var message=document.getElementById("fineprint");
container.removeChild(message);
如果想删除某个节点，但又不知道它的父元素是哪个，parentNode属性可以帮上大忙：
var message=document.getElementById("fineprint");
var container=message.parentNode;
container.removeChild(message);
替换节点
DOM提供了一个用来替换文档树里节点的方法。
replaceChild（）
将把一个给定父元素里的一个子节点替换成另外一个节点。返回值是一个指向已被替换的那个子节点的引用指针：
reference=element.replaceChild(newChild,oldChild) //oldChild必须也是element的一个子节点。
在下例子中，id属性值是content的元素还包含着一个id属性值是fineprint的元素，将新创建的元素替换fineprint元素：
var container=document.getElementById("content");
var message=document.getElementById("fineprint");
var para=document.createElement("p");
container.replaceChild(para,message);
replaceChild()方法也可以用文档树上的现有节点去替换另一个现有节点:
var container=document.getElementById("content");
var message=document.getElementById("fineprint");
var announcement=document.getElementById("headline");
container.replaceChild(announcement,message);
设置属性节点
DOM提供了一个用来设置属性节点的方法。
setAttribute()
将为给定元素节点添加一个新的属性值或是改变它的现有属性值。该方法只能用在属性节点上。
element.setAttribute(attributeName,attributeValue)
属性的名字和值必须以字符串的形式传递给此方法。如果这个属性已经存在，它的值将会被刷新；如果不存在，该方法将先创造它再为它赋值。
var message=document.getElementById("fineprint");
meaasge.setAttribute("title","this is important");
即使某个元素还没被插到文档树上，该方法也可以设置它的属性节点。
var para=document.createlement("p");
para.setAttribute("title","this is important");
var container=document.getElementById("content");
contaiiner.appendChild(para);
查找节点
DOM提供了好几个用来在文档树上定位节点的方法。
1、getAttribute()
将返回一个给定元素的一个给定属性节点的值。
attribute=element.getAttribute(attributeName)
给定属性的名字必须以字符串的形式传递给这个方法，给定属性的值将以字符串的形式返回。如果给定属性不存在，该方法将返回一个空字符串。
eg:
var message=document.getElementById("fineprint");
var titletext=message.getAttribute("title");
2、getElementById（）
该方法的用途是寻找一个有着给定id属性值的元素。
element=document.getElementById(ID)
将返回一个有着给定id属性值元素节点（一个对象，有着nodeName、nodeType等属性）。如果不存在这样的元素，他返回null。这个方法只能用于document对象。
eg：
var message=document.getElementById("fineprint");
message.setAttribute("title","this is important");
3、getElementsByTagName()
该方法的用途是寻找有着给定标签的所有元素。
element=document.getElementByTagName(tagName)
该方法将返回一个节点集合（数组）。这个数组里面的每个元素都是一个对象，他们都有着nodeName、nodeType 等属性。
在该方法成功返回后，比较常见的后续手段是用一个for循环去遍历这个方法所返回的节点集合里的所有元素。在for循环里，我们可以用setAttribute（）、cloneNode（）、等方法对各有关元素进行查询或处理。
var para=document.getElementByTagName("p"); for(var i=0;i<para.length;i++)
{ para[i].setAttribute("title","hello"); }
4、hasChildNodes()
该方法可用来检查一个给定元素是否有子节点。
booleanValue=element.hasChildNodes
返回一个布尔值true或false.如果给定元素有子节点，该方法的返回值是true，否则返回false。
文本节点和属性节点都不可能在含有子节点，所以对这两类节点使用该方法的返回值将永远是false。
该方法通常与if语句搭配使用。下列例子先找出id属性值是fineprint的那个元素，并把它保存在变量message中，如果这个元素有子节点，就把他们以一个数组保存到变量children中去：
varmessage=document.getElementById("fineprint");
if(message.hasChildNodes){
var children=message.childNodes;
}
该方法无法返回某个给定元素的子节点，但是子节点可以用这个元素的childNodes属性去检索。如果该方法的返回值是false，childNodes属性将是一个空数组。
DOM属性
下面是DOM树里的各种节点的一些属性。
节点的属性
文档里的每个节点都有以下属性：
1、nodeName：将返回一个字符串，其内容是给定节点的名字。
name=node.nodeName
如果给定的节点是元素节点，该属性的返回值是这个元素的名字；
如果给定的节点是属性节点，该属性的返回值是这个属性的名字；
如果给定的节点时文本节点，该属性的返回值是一个内容为#text的字符串。
nodeName属性是一个只读属性，只能对他进行查询（读），不能直接对他进行设置（写）。
2、nodeType：将返回一个整数，这个数值代表着给定节点的类型。
integer=node.nodeType
nodeType有两种可取值。nodeType属性返回的整数值对应着以下12中节点类型之一：
ELEMENT_NODE/ATTRIBUTE_NODE/TEXT_NODE/CDATD_SECTION_NODE/ENTITY_REFDRENCE_NODE/ENTITY_NODE/PROCESSING_INSCTRUCTION_NODE/COMMENT_NODE/DOCUMENT_NODE/DOCUMENT_TYPE_NODE/DOCUMENT_FRAGMENT_NODE/NOTATION_NODE
前面三种最重要，分别是：元素节点、属性节点、文本节点。
3、nodeValue：将返回给定节点的当前值。该属性将返回一个字符串。
value=node.nodeValue
如果给定的节点是元素节点，该属性的返回值是null；
如果给定的节点是属性节点，该属性的返回值是这个属性的值；
如果给定的节点时文本节点，该属性的返回值是该文本节点的内容。
nodeValue属性是一个读/写属性。但是不能给元素节点的nodeValue属性设置一个值。
eg：
var message=document.getElementByTagName("fineprint");
if(message.nodeValue==3){
message.firstChild.nodeValue="this will work";
}
如果想刷新某个文本节点的值，nodeValue属性提供了最简单的机制。如果想要刷新某个属性节点的值，通过这个属性节点的父节点和setAttribute（）方法设置网跟简单易行。
遍历节点树
用一下的属性读取出来的信息可以让我们了解项链节点之间的关系。
1、childNodes：该属性将返回一个数组，这个数组由给定元素节点的子节点构成。
nodelist=node.childNodes
这个nodelist集合里的每个节点都是一个节点对象。这些节点对象都有着nodeType、nodeName等常见的节点属性。
文本节点和属性节点永远都不会包含任何子节点，所以他们的childNodes属性永远会返回一个空数组。
如果想知道某个元素有没有子节点，可以使用hasChildNodes（）方法；
如果想知道某个元素节点有多少个子节点，请使用childNodes数组的length属性。
node.childNodes.length
childNodes属性是一个只读属性。
2、firstChild：该属性将返回一个给定元素节点的第一个子节点。返回一个节点对象的引用指针。
reference=node.firstChild
文本节点和属性节点永远都不会包含任何子节点，所以他们的firstChild属性永远会返回null。
某个元素节点的firstChild属性等价于这个元素的childNodes节点集合中的第一个节点：
reference=node.childNodes[0]
如果某个元素节点没有任何的子节点，它的firstChild属性将返回null。
firstChild属性是一个只读属性。
3、lastChild：将返回一个给定元素节点的最后一个子节点。返回一个节点对象的引用指针
reference=node.lastChild
这个节点对象都有着nodeType、nodeName等常见的节点属性。
文本节点和属性节点永远都不会包含任何子节点，所以他们的lastChild属性永远会返回null。
某个元素节点的firstChild属性等价于这个元素的childNodes节点集合中的最后一个节点：
reference=node.childNodes[elementNode.childNodes.length-1]
如果某个元素节点没有任何的子节点，它的lastChild属性将返回null。
lastChild属性是一个只读属性。
4、nextSibling：将返回给定节点的下一个节点。返回一个节点对象的引用指针。
reference=node.nextSibling
这个节点对象都有着nodeType、nodeName等常见的节点属性。
如果给定节点的后面没有同属一个父节点的节点，它的nextSibling属性将返回null。
nextSibling属性是一个只读属性。
5、parentNode：将返回一个给定节点的父节点。返回一个节点对象的引用指针：
reference=node.parentNode
这个节点对象都有着nodeType、nodeName等常见的节点属性。
该属性返回节点永远是元素节点，因为只有元素节点才有可能包含子节点。唯一例外的是document节点，他没有父节点。换句话说，document节点的parentNode属性将返回null。
parentNode属性是一个只读属性。
6、previousSibling：将返回已给给定节点的下一个子节点。返回一个节点对象的引用指针。
reference=node.previousSibling
这个节点对象都有着nodeType、nodeName等常见的节点属性。
如果给定节点的前面没有同属一个父节点的节点，它的返回值是null。
previousSibling属性是一个只读属性。
浙公网安备 33010602011771号