乐趣区

关于javascript:js中有关DOM操作以及事件绑定

如何获取页面的 dom 元素

1. 通过 id 来获取:document.getElementById(); 失去一个 DOM 对象
2. 通过类名来获取:document.getElementsByClassName(); 失去一个数组;3. 通过 tag 标签来获取:document.getElementByTagName('p'); 失去 p 元素的一些汇合

如何用 js 来操作 dom 元素

1. 创立元素的办法:createElement();
2. 创立一个文本节点:createTextNode();
3. 元素插入到页面:

node.appendChild() // 插入到 node 元素节点之后
insertBefore(newNode,node) // 插入到 node 节点之前 

4. 删除节点:removeChild()
5. 替换节点:replaceChild(newNode,node) // 替换 node 节点
6. 复制节点:node.cloneChild(true/false) //true 代表复制子节 点 false 代表不复制子节点

js 中有 12 种节点类型,每一种节点类型都有 3 个属性:nodeType nodeName NodeValue. 我罕用的节点类型有:元素节点,属性节点,文本节点,正文节点

5. 获取以后节点的父节点:parentNode()
6. 获取兄弟节点:nextSibiling (某节点之后紧跟的节点) previousSibling(某节点的上一个节点)
7. 获取子节点:ele.childNodes–> 返回一个数组 firstChild lastChild

DOM 绑定事件

1.dom 绑定事件有 2 种形式:

ele.onClick=function(){
}

ele.addEventListner(事件名,事件执行程序,是否冒泡(默认为 false,不进行冒泡))

2. 这 2 种事件绑定形式有什么区别?

 第一种绑定形式只会执行最初一次绑定的事件处理程序
第二种能够为一个元素创立多个事件处理程序

DOM 事件未完待续。。。随后补充

退出移动版