js中DOM介绍
2017-12-21 本文已影响0人
后来者2016
DOM查找
- 直接查找
var obj = document.getElementById('i1')
- 间接查找
文本内容操作
- 获取的是当前标签的仅文本内容，包含的html标签直接过滤掉
obj.innerText
- 获取当前内容，包含html标签
obj.innerHTML
使用场景：直接设置一个连接
obj.innerHTML = <a href="http://www.baidu.com">百度</a>
- obj.value
- 对于input系列标签，获取或修改输入内容使用 obj.value
- 对于selec标签，除了obj.value，还特有 obj.selectedIndex
- 对于textarea 多文本输入标签, 获取或修改输入内容使用 obj.value
obj.value使用实例：
实现功能：搜索框默认显示(实现 placeholder属性)
注意点：
- 绑定onclick事件的问题：用tab键
- onfocus属性标签标签获取到焦点后执行一个函数
- 搜索框打入关键字后的智能搜索（ajax、弹出框）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto">
<input id="i1" onfocus="Focus()"; onblur="Blur();" type="text" value="请输入关键字">
</div>
<script>
function Focus() {
var tag = document.getElementById('i1');
var va1 = tag.value;
if(va1 == "请输入关键字"){
tag.value = "";
}
}
function Blur() {
var tag = document.getElementById('i1');
var va1 = tag.value;
if(va1 == ""){
tag.value = "请输入关键字";
}
}
</script>
</body>
</html>
dom样式操作
- 对集合操作
# className
obj.className = "c1 c2"
obj.className
# classList
obj.classList
obj.classList.add("c3")
obj.classList.remove("c3")
- 对具体某一个样式操作
obj.style.fontSize = '16px'
obj.style.color = 'red'
属性操作
设置、删除、获取
obj.setAttribute('value','abc')
obj.removeAttribute('value')
obj.getAttribute('value')
获取到所有属性
obj.attributes
创建标签
- 字符串形式
插入标签的位置有4种 - 对象的方式
document.createElement
appendChild(对象)
提交表单
借助js，任何标签都可以提交表单
<form id="f1" action="http://www.baidu.com">
<a onclick="submitForm()">提交吧</a>
</form>
<script>
function submitForm() {
document.getElementById('f1').submit()
}
</script>
其他杂项
console.log()
alert(123)
var v = confirm('真的要删除吗？')
console.log(v)
获取url：location.href
重定向url：location.href = "http://www.baidu.com"
刷新url：
location.href = location.href
location.reload()
一直执行的定时器
var obj = setInterval(function(){
console.log(1)
clearInterval(obj);
},5000)
定时器只执行一次，用法类似setInterval
setTimeout()
应用：点击删除按键，显示5秒中已删除
事件
onclick、onblur、onfocus
三种绑定方式：
- 直接标签绑定：onclick='xxx()'
- 先获取Dom对象,然后进行绑定 obj.onclick
this，当前触发事件的标签 - mydiv.addEventListener('click',function(){console.log('aaa')},false)
事件之捕捉与冒泡
