节点属性:
每个节点都有一个nodeType属性:
1:ELEMENT_NODE
9:DOCUMENT_NODE
3:TEXT_NODE
nodeName:元素的标签名
每个节点都有一个childNodes属性:其中保存着一个NodeList对象
每个节点都有一个ownerDocument属性:其中保存着节点所在的文档节点,而不用层层遍历获取顶层节点
节点关系:
firstChild
lastChild
childNodes 是一个NodeList对象(类似下文的HTMLCollection)
nextSibling(nextElementSibling)
previousSibling(previousElmentSibling)
这些节点关系都会包括换行,注释等特殊符号,除了nextElementSibling和previousElmentSibling
节点操作
插入
appendChild,insertBefore
替换
replaceChild
移除
removeChild
克隆
cloneNode
Document类型:
(HTMLDocument)
nodeType 9
nodeName #document
ownerDocument null
document.documentElement (html)
document.childNodes[1] html
document.lastChild html
document.body
document.doctype
document.title
document.URL
document.domain
document.referrer
以下方法取得的内容是一个HTMLCollection集和(类数组对象)
document.getElementByID()
document.getElementsByTagName()
document.getElementsByName()
Element类型
id
title
class
style
事件
getAttributes
setAttributes
element.xxx
事件
事件有三种绑定方式:
onxxx
addEventListerner
attachEvent
其中addEventListener可以指定冒泡和捕获。(第三个参数是false是冒泡,true是捕获)
其它两个默认是冒泡
三种方式的对比
与事件相关的设计模式是事件委托:
事件委托的原理:
事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件。
事件委托