zoukankan      html  css  js  c++  java
  • 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

    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
  • 相关阅读:
    linux学习笔记三
    linux学习笔记二
    linux学习笔记一
    Linux操作篇之配置DNS服务(二)
    Linux操作篇之配置DNS服务(一)
    Linux操作篇之配置DHCP服务
    Linux操作篇之配置SSH服务
    Linux操作篇之自动化安装操作系统(二)
    Linux操作篇之自动化安装操作系统(一)
    Linux的shell编程篇之环境变量配置文件
  • 原文地址:https://www.cnblogs.com/xzhang/p/3968204.html
Copyright © 2011-2022 走看看