DOM常见操作

最新推荐文章于 2024-10-09 08:38:19 发布

weixin_30466039

最新推荐文章于 2024-10-09 08:38:19 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuzheng820/p/7902471.html

一、查找
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