DOM常见操作

一、查找

1、直接查找

document.getElementById 根据ID获取一个标签

document.getElementsByName 根据name属性获取标签集合

document.getElementsByClassName 根据class属性获取标签集合

document.getElementsByTagName 根据标签名获取标签集合

2、间接查找

parentNode // 父节点

childNodes // 所有子节点

firstChild // 第一个子节点

lastChild // 最后一个子节点

nextSibling // 下一个兄弟节点

previousSibling // 上一个兄弟节点

parentElement // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素

二、操作

1.内容

innerText 文本

outerText

innerHTML HTML内容

innerHTML

value 值

input value获取当前标签中的值

select 获取选择中的value值(selectedIndex)

textarea value 获取当前标签中的值

2.属性

attributes // 获取所有标签属性

setAttribute(key,value) // 设置标签属性

getAttribute(key) // 获取指定标签属性

3.class操作

className // 获取所有类名

classList.remove(cls) // 删除指定类

classList.add(cls) // 添加类

4.提交表单

document.geElementById('form').submit() //任何标签都可以通过DOM提交表单

5.其他操作

console.log 输出框

alert 弹出框

confirm 确认框

// URL和刷新

location.href 获取URL

location.href = "url" 重定向

location.reload() 重新加载 <=====>location.href = location.href

// 定时器

setInterval 多次定时器

clearInterval 清除多次定时器

setTimeout 单次定时器

clearTimeout 清除单次定时器

三、事件

　　绑定事件的2种方式：

　　　　a.直接标签绑定

　　　　b.先获取DOM对象，然后进行绑定

document.getElementById(‘xxx’).onclick

　　this,当前触发事件的标签（谁调用函数，this就指向谁）

　　　　a.第一种绑定方式（DOM0）：

<input id = 'i1' type = 'button' onclick ='clickOn(this)'>
function clickOn(self){
//self  当前点击的标签
}

　　　　b.第二种绑定方式（DOM1）：

<input id = 'i1' type = 'button'>
document.getElementById(‘i1’).onclick = function(){
// this 代指当前点击的标签
}

　　　　c.第三种绑定方式（DOM2）：

<div id = "i1"></div>
<script>
    var mydiv = document.getElementById('i1')
    mydiv.addEventListener("click",function(){console.log('aaa')},false)
    mydiv.addEventListener("click",function(){console.log('bbb')},false)
</script>
//事件的捕捉与冒泡

更多详细内容详见：http://www.cnblogs.com/wupeiqi/articles/5643298.html

相关文章