JavaScript处理HTML DOM

本来只想好好写一篇博文，最后弄到好像重构一样了，越做越不满意，先这样吧:)

HTML DOM - JavaScript处理HTML DOM

获取HTML元素

改变HTML元素

增删HTML元素

添加事件处理

获取HTML对象

一些属性

nodeType常量

其他

  不建议使用   +hover显示详情

获取HTML元素+show detail

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]+

不把文本节点算进来，子节点个数

改变HTML元素+show detail

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

增删HTML元素+show detail

document.createElement()

document.createComment()

document.createAttribute()

document.createTextNode()

document.createDocumentFragment()

document.removeChild()+

返回被删除元素

document.appendChild()

document.replaceChild()+

返回被替换元素

parentElement.insertBefore(new, old)

cloneNode()+

?

hasChildNodes()

document.write()+

注意文档加载完毕后使用会重写整个文档

添加事件处理+show detail

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"

获取HTML对象+show detail

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对象

一些属性+show detail

attributes+

如该节点为Element，以NameNodeMap形式返回该元素属性

nodeName

nodeType

nodeValue

parentNode

childNodes+

以NodeList形式返回

firstChild

lastChild

nextSibling

previousSibling

NodeType常量+show detail

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

其他+show detail

1. 一个Node不包括它里面的文字，若要获取文字：innerHTML或者firstChild.nodeValue

2. TextNode的NodeValue是它本身

3. nodeName约等于tagName，特别地：文字#text，#document，attributeNode

4. nodeType：Element（1），Attribute（2），Text（3），Comment（8），Document（9）

5. 由于历史原因document.id/ document.forms[images/links].id可以获取元素

6. NodeList和ObjectCollections具有实时性，不会获取一次后就固定不动的

7. NodeList是个Array-like对象，可用NodeList.length获取个数

8. document object is your web page.

9. W3C DOM 包括 Core DOM，XML DOM，HTML DOM

10. ownerDocument - ?

11. 因为有些CSS属性和JS的保留字冲突，各种浏览器有不同的获取方式，例如：style.styleFloat - [lte IE 8]，style.cssFloat - [gte IE 9]和FF等

12. getAtribute("className")[lte IE 7]

    getAttribute("class") - FF

13. getAttribute("htmlFor")[lte IE 7]

    getAttribute("for") - FF

一些题外小笔记：

IE支持[]和()访问，FF支持[]访问，所以大家都用[]访问NodeList中的元素

FF不支持给元素宽高直接赋数字值，导致大家在赋值给元素宽高时都要用这样的形式width=h+"px"

[lte IE 8]getYear取到的是实际年份，现代浏览器获取到的是年份减去1990