JavaScript处理HTML DOM
本来只想好好写一篇博文,最后弄到好像重构一样了,越做越不满意,先这样吧:)
不建议使用 +hover显示详情 获取HTML元素+show detaildocument.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 detailelement.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 detaildocument.createElement()
document.createComment()
document.createAttribute()
document.createTextNode()
document.createDocumentFragment()
document.removeChild()+
返回被删除元素
document.appendChild()
document.replaceChild()+
返回被替换元素
parentElement.insertBefore(new, old)
cloneNode()+
?
hasChildNodes()
document.write()+
注意文档加载完毕后使用会重写整个文档
添加事件处理+show detailelement.onclick = function(){ code }
element.addEventListener("click", funcName[, useCapture])+
useCapture设置使用bubbleing(true)或者capturing(false),前者事件触发由里到外,后者则由外到里,如果要在方法里传参数需要这样定义:function(){ funcName(a, b); },笔者试过若直接写funcName(a, b),加载时这个方法会执行一次的,相比οnclick=的方法,这个可以给一个事件定义多个监听器 - [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 detailLevel 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 detailattributes+
如该节点为Element,以NameNodeMap形式返回该元素属性
nodeName
nodeType
nodeValue
parentNode
childNodes+
以NodeList形式返回
firstChild
lastChild
nextSibling
previousSibling
NodeType常量+show detailNode.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-
一个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
转载于:https://www.cnblogs.com/xzhang/p/3968204.html
- 点赞
- 收藏
- 分享
- 文章举报
- JavaScript处理HTML DOM
- PHP与JavaScript对多项选择的处理
- Manipulating Pages and Server Controls with JavaScript(使用JS处理页面和服务器控件)
- Javascript图像处理——图像形态学
- JavaScript的异常处理语句
- 用javascript写事件处理
- JavaScript事件处理程序详解
- 使用Javascript和DOM Interfaces来处理HTML
- 教你区别和处理javascript单引号和双引号
- Javascript+ASP处理表单的生成与验证
- javascript单引号和双引号的区别和处理
- Javascript 学习笔记 错误处理
- IE浏览器在Javascript处理数组对象时出现数组个数不正确
- javascript asp教程错误处理
- javascript事件处理
- 使用Java处理JavaScript
- javascript打造跨浏览器事件处理机制[Blue-Dream出品]
- JavaScript的函数和异常处理
- JavaScript事件驱动及事件处理
- JavaScript精简学习4(动态表单和链接处理)