首页 > 代码库 > JavaScript处理HTML DOM
JavaScript处理HTML DOM
本来只想好好写一篇博文，最后弄到好像重构一样了，越做越不满意，先这样吧:)
- HTML DOM - JavaScript处理HTML DOM
- 获取HTML元素
- 改变HTML元素
- 增删HTML元素
- 添加事件处理
- 获取HTML对象
- 一些属性
- nodeType常量
- 其他
document.getElementById(id)
document.getElementsByTagName(name)
Object Collections: x.elements[index]+
x为以下元素：document.anchors、document.body、document.documentElement、document.embeds、documen.forms、document.head、document.images、document.links、document.scripts、document.title。只对特定元素，如document.forms的elements只获取表单元素。
document.getElementsByName(name)+
[lte IE 9]将id和name混为一谈，所以要有好习惯，id和name用相同名字
document.allOnly [IE]
document.querySelector()[gte IE 8]
document.querySelectorAll()[gte IE 8]+
不把文本节点算进
document.getElementsByClassName(class)[gte IE 9]+
参数为"*"时返回全部
document.firstElementChild()[gte IE 9]+
不把文本节点算进来
document.lastElementChild()[gte IE 9]+
不把文本节点算进来
document.nextElementSibling()[gte IE 9]+
不把文本节点算进来
document.previousElementSibling()[gte IE 9]+
不把文本节点算进来
document.childElementCount()[gte IE 9]+
不把文本节点算进来，子节点个数
element.innerHTML
element.attributeName
element.setAttribute(attr, value)
element.getAttribute()
element.removeAttribute()
element.style.propertyName
element.innerText+
FF不支持，其他支持，IE引入，为空时返回""
element.textContent+
[lte IE 8]不支持，其他支持，FF引入，注意，相比innerText，这个会保留前后空格，如换行等造成的空格，为空时返回undefined
document.createElement()
document.createComment()
document.createAttribute()
document.createTextNode()
document.createDocumentFragment()
document.removeChild()+
返回被删除元素
document.appendChild()
document.replaceChild()+
返回被替换元素
parentElement.insertBefore(new, old)
cloneNode()+
?
hasChildNodes()
document.write()+
注意文档加载完毕后使用会重写整个文档
element.onclick = function(){ code }
element.addEventListener("click", funcName[, useCapture])+
useCapture设置使用bubbleing(true)或者capturing(false)，前者事件触发由里到外，后者则由外到里，如果要在方法里传参数需要这样定义：function(){ funcName(a, b); }，笔者试过若直接写funcName(a, b)，加载时这个方法会执行一次的，相比onclick=的方法，这个可以给一个事件定义多个监听器 - [gte IE 9]
element.removeEventListener(xx,funcName)[gte IE 9]
element.attachEvent(xx, funcName)Only [IE]+
注意要带"on"
element.detachEvent(xx, funcName)Only [IE]+
注意要带"on"
Level 1：
document.anchors
document.applets
document.body
document.cookie
document.domain
document.forms
document.images
document.links - area/ a带href
document.referrer
document.title
document.URL
Level 3：
document.baseURI
document.doctype
document.documentElement - html
document.documentMode
document.documentURI
document.domConfig
document.embeds
document.head
document.implementation
document.inputEncoding
document.lastModified
document.readyState
document.scripts
document.strictErrorChecking
document.location - 与window.location指向同一个Location对象
attributes+
如该节点为Element，以NameNodeMap形式返回该元素属性
nodeName
nodeType
nodeValue
parentNode
childNodes+
以NodeList形式返回
firstChild
lastChild
nextSibling
previousSibling
Node.ELEMENT_NODE - 1
Node.TEXT_NODE - 3
Node.DOCUMENT_NODE - 9
Node.DOCUMENT_FRAGMENT_NODE - 11
Node.ATTRIBUTE_NODE - 2
Node.COMMENT_NODE - 8
一个Node不包括它里面的文字，若要获取文字：innerHTML或者firstChild.nodeValue
TextNode的NodeValue是它本身
nodeName约等于tagName，特别地：文字#text，#document，attributeNode
nodeType：Element（1），Attribute（2），Text（3），Comment（8），Document（9）
由于历史原因document.id/ document.forms[images/links].id可以获取元素
NodeList和ObjectCollections具有实时性，不会获取一次后就固定不动的
NodeList是个Array-like对象，可用NodeList.length获取个数
document object is your web page.
W3C DOM 包括 Core DOM，XML DOM，HTML DOM
ownerDocument - ?
因为有些CSS属性和JS的保留字冲突，各种浏览器有不同的获取方式，例如：style.styleFloat - [lte IE 8]，style.cssFloat - [gte IE 9]和FF等
getAtribute("className")[lte IE 7]
getAttribute("class") - FF
getAttribute("htmlFor")[lte IE 7]
getAttribute("for") - FF
- 一些题外小笔记：
- IE支持[]和()访问，FF支持[]访问，所以大家都用[]访问NodeList中的元素
- FF不支持给元素宽高直接赋数字值，导致大家在赋值给元素宽高时都要用这样的形式width=h+"px"
- [lte IE 8]getYear取到的是实际年份，现代浏览器获取到的是年份减去1990
JavaScript处理HTML DOM