首页 > 代码库 > JavaScript处理HTML DOM

JavaScript处理HTML DOM

<style></style>

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

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

JavaScript处理HTML DOM