《JavaScript DOM编程艺术》学习笔记之常用DOM方法属性

来源：互联网发布：vivo手机网络接入点编辑：程序博客网时间：2024/06/02 01:29

DOM节点类型分为三种：元素节点、文本节点、属性节点。

DOM中常用的获取元素的方法：

getElementById(id) ：DOM提供返回一个与id值相同的元素节点对应的对象

getElementsByTagName(tag) ：该方法返回一个数组，tag为文档中的标签

getElementsByClassName(class) ：返回一个文档中的类名与class相同的数组

以上三种方法都属于document对象，所以在调用的时候需要 document. 来调用，比如

document.getElementById(id) ;

DOM中获取和设置属性的方法：

getAttribute(attribute)：获取当前对象attribute的属性值

setAttribute(attribute,value)：对当前对象的attribute属性值赋值为value

这两种方法不属于document对象，要通过对象来调用，比如

for(var i=0;i<paras.length;i++){

alert(paras[i].getAttribute("title")) ;

}

createElement(nodename)方法：创建一个元素节点。

parent.appendchild(child)方法：把child节点新添加到parent的最后。

createTextNode(text)方法：创建一个文本节点。

parent.insertBefore(newElement,targetElement)：在tergetElement的前面添加newElement元素节点。

DOM的childNodes属性：

该属性可以用来获得任何一个元素的所有子元素，返回一个包含这个元素全部子元素的数组。

如： var body_element = document.getElementsByTagName("body")[0] ;

DOM的nodeType属性：

node.nodeType ;

元素节点的nodeType属性值是 1 ；

属性节点的nodeType属性值是 2 ；

文本节点的nodeType属性值是 3 ；

DOM的nodeValue属性：

node.nodeValue ;

返回该节点的值；

DOM的firstChild和lastChild属性：

node.firstChild与node.childNodes[0] 等价，返回第一个子节点；

node.lastChild与node.childNodes[node.childNodes.length-1]等价，返回最后一个子节点；

节点的父节点为para.parentNode,兄弟节点为para.nextSibling。

两个常用但是JavaScript没有提供的函数：

onload载入多个函数：

function addLoadEvent(func){var oldonload = window.onload ;if(typeof window.onload != "function"){window.onload = func ;}else {window.onload = function(){oldonload() ;func() ;}}}

insertAfter

function insertAfter(newElement,targetElement){var parent = targetElement.parentNode ;if(parent.lastChild==targetElement){parent.appendChild(newElement) ;}else{parent.insertBefore(newElement,targetElement.nextSibling) ;}}

附上一段以上属性应用的代码：

<body> <h1>Snapshots</h1>          <ul id="pic"><li><a href="../images/th.jpg" title="A">A</a></li><li><a href="../images/th1.jpg" title="B">B</a></li><li><a href="../images/th2.jpg" title="C">C</a></li><li><a href="../images/th3.jpg" title="D">D</a></li></ul><script type="text/javascript" src="showpic.js"></script></body>

// JavaScript Documentfunction showPic(whichPic){if(!document.getElementById("placeholder")) return false ;var source = whichPic.getAttribute("href") ;var placeholder = document.getElementById("placeholder") ;placeholder.setAttribute("src",source) ;if(document.getElementById("description")){var text = "" ;if(whichPic.getAttribute("title")) text = whichPic.getAttribute("title") ;var description = document.getElementById("description") ;description.firstChild.nodeValue = text ;}return true ;}function preparepic(){if(!document.getElementsByTagName||!document.getElementById) return false ;if(!document.getElementById("pic")) return false ;var gallery = document.getElementById("pic") ;var links = gallery.getElementsByTagName("a") ;for(var i=0;i<links.length;i++){links[i].onclick = function(){if(showPic(this))  return false ;return true ;}}}function preparePlaceholder(){if(!document.createElement) return false ;if(!document.createTextNode) return false ;if(!document.getElementById) return false ;if(!document.getElementById("pic")) return false ;var placeholder = document.createElement("img") ;placeholder.setAttribute("id","placeholder") ;placeholder.setAttribute("src","../images/th.jpg") ;placeholder.setAttribute("alt","my images") ;var description = document.createElement("p") ;description.setAttribute("id","description") ;var desctext = document.createTextNode("Choose an image.") ;description.appendChild(desctext) ;var pic = document.getElementById("pic") ;insertAfter(placeholder,pic) ;insertAfter(description,placeholder) ;}function insertAfter(newElement,targetElement){var parent = targetElement.parentNode ;if(parent.lastChild==targetElement){parent.appendChild(newElement) ;}else{parent.insertBefore(newElement,targetElement.nextSibling) ;}}function addLoadEvent(func){var oldonload = window.onload ;if(typeof window.onload != "function"){window.onload = func ;}else {window.onload = function(){oldonload() ;func() ;}}}addLoadEvent(preparePlaceholder) ;addLoadEvent(preparepic) ;

0 0