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
时间: 2024-11-08 19:35:32

JavaScript处理HTML DOM的相关文章

javascript系列之DOM(二)

原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀 的DOM操作API.可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作.下面将总结出总结出几种很实用的扩展方法.包括 after()和before(), A:after()和before() 1 function after(elem){ 2 if(this.parentNode){ 3 this.parentNode.

2014年辛星解读Javascript之用DOM动态操纵HTML元素

关于DOM,我们了解了可以用DOM操纵HTML的一些属性和样式,还可以为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代码示例是肯定少不了的. 不过在使用DOM动态操纵HTML元素之前,我们还是先了解一下DOM树,下面是我从网上找的一个DOM树的图片,它的截图如下: 如果大家学习过"树"这种数据结构,就会很好理解,一个父节点可以包含N个子节点,这些子节点可能是div.p等标签,也可以是属性,还可以是中间的文

【JQuery】jquery对象和javascript对象即DOM对象相互转换

jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象.jQuery 对象是 jQuery 独有的,其可以使用 jQuery 里的方法,但是不能使用 DOM 的方法:例如: $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象. DOM对象就是Javascript 固有的一些对象操作.DOM 对象能使用Javascript 固有的方法,但是不能使用

JavaScript和HTML DOM的区别与联系

JavaScript和HTML DOM的区别与联系 区别: javascript JavaScript 是因特网上最流行的浏览器脚本语言.很容易使用!你一定会喜欢它的! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. HTML DOM HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HTML 的一系列标准的对象,

javascript JavaScript强化教程——DOM编程性能优化

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 ——DOM编程性能优化 DOM的访问与修改访问DOM元素是有代价的——修改元素侧更为昂贵,因为他会导致浏览器重新计算页面的几何变化.当然,最坏的情况是在循环中访问或修改元素,尤其是对HTML元素几何循环操作.为了让你对DOM编程带来的性能问题有个量化的了解,请看下面的简单实例: function innerHTMLLoop(){ for(var count = 0;count<15000;count++)

【转】console.time 简单分析javascript动态添加Dom节点的性能

本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能体现差距)指的是循环创建的DOM节点 3 for(var i=0;i<totalNum;i++){}: 我们用for来表示就好了,简写代码 如果叫你用javascript动态增加DOM节点,你有哪几种思路呢? 1 .使用innerHTML和字符串拼接 console.time("time1"); var str = ""; for{ str += &quo

console.time 简单分析javascript动态添加Dom节点的性能

Bullshit 本来想每天都更新下博客的,但是最近要考试,还有就是自己还是停留在暗自窃喜中吧(这种想法要改变).其实最近总在想,自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改.昨天把自己的电脑重装了,确实很多软件的存放要改地方了,之前不知道怎么去管理软件安装,所以放得乱七八糟的.说好一大堆废话之后,我最后再说一遍,管好自己的时间.数据真的比你学习东西重要. Method 本文代码约定 1 el: 指的是增加直接点的DOM节点 2 totalNum: 为100000(值越大越能

javascript系列之DOM(一)

原文:javascript系列之DOM(一) DOM(document object moudle),文档对象模型.它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构,内容和样式.也就是一切语言(js,php 等)对web的操作是建立在DOM的基础之上的.行为的发生,首先必须获取文档中的一个对象作为其载体. DOM发展史 在漫长的互联网发展史上DOM一共经历了四个阶段.当前,我们正处在DOM 3阶段. DOM 0 :不是W3C规范,只是Netscape Navigator

JavaScript强化教程——DOM编程(两种控制div移动的方法)

本文为H5EDU机构官方HTML5培训教程,主要介绍:JavaScript强化教程--DOM编程(两种控制div移动的方法) 第一种 按钮控制首先 创建两个html按钮和一个div并给div一个样式 input type="button" value="左" id="1"> <input type="button" value="右" id="2"> <div i

一些JavaScript中的DOM的优化小技巧

在进行DOM优化时需要关注的问题有:修改DOM的时候,会引起页面的重排,重绘.因为JS是单线程执行的,那么在重排重绘的过程中可能会阻塞用户的操作.为了更好的用户体验,必须要严格控制这些操作. 一.对象集合 NodeList 当我们调用:getElementsByTagName,getElementsByName,getElementsByClassName的时候,返回的结果是一个NodeList,这个NodeList是实时的.如果你修改对应的html,那么NodeList中也会得到修改. 而且,