Python学习笔记Day16 - JS的DOM操作
【DOM】Document Object Model
1、找到标签
a. 直接找
document.getElementById('i1') 根据ID获取一个标签 ->> <div><div/>
document.getElementsByName('n1') 根据name属性获取标签集合（列表）
document.getElementsByClassName('div') 根据class属性获取标签集合
document.getElementsByTagName('c1') 根据标签名获取标签集合
b. 间接找
tag = document.getElementById('i1')
tag.parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作标签
a. innerText
标签.innerText 获取标签中的文本内容
标签.innerText = "" 对标签内部文本进行重新赋值
b. className、classList
标签.className = 'c1' 直接整体做操作
标签.classList 获取样式列表
标签.classList.add('c1') 添加指定样式
标签.classList.remove('c1') 删除指定样式
c. 绑定点击事件
<div onclick='func();'>点我</div>
<div onfocus='func();'>点我</div>
<div onblur='func();'>点我</div>
<script>
function func(){
}
</script>
d. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true
3、文本操作
.innerText 只获取文本，过滤标签，赋值时识别为字符串
.innerHTML 全部内容
.value input标签取值赋值
textarea标签取值赋值
select标签获取赋值选中值
（obj.selectedIndex = 1）
4、绑定事件
onclick
onfocus
onblur
新版HTML已支持placeholder="请输入关键字"自动实现onfocus和onblur功能，并且不用写js代码
5、样式操作
.classList #对样式整体进行操作
.style.color ='red'; #直接在标签上添加style
6、属性操作
.setAttribute('name','alex') #设置属性
.removeAttribute('value') #移除属性
.attributes #获取所有索引与属性名的k-v字典
7、创建标签
// 对象方式
var tag = document.createElement('a');
tag.innerText = "wupeiqi";
tag.className = "c1";
tag.href = "http://www.cnblogs.com/wupeiqi";
# var p = '<p></p>'
# p.appendChild(tag);
document.getElementById('i1').appendChild(tag) # 传入对象
// 字符串方式
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>";
document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag); # 传入字符串
//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
8、提交表单
配合onclick()可以使任何标签点击提交
document.getElementById('i1').submit()
9、弹窗,定时,刷新
console.log 输出框
alert 弹出框
confirm 确认框，返回True或False
// URL和刷新
location.href 获取URL
location.href = "url" 重定向
location.reload() 重新加载
// 定时器
obj = setInterval({},5000) 多次定时器
clearInterval(obj) 清除多次定时器
setTimeout({},5000) 单次定时器
clearTimeout() 清除单次定时器
10、事件
样式 结构 行为 相分离
在JS里找到标签，然后.onclick = "function(){}"
this 指针，指向当前调用的对象
-
1.定义时this绑定：
<input type='button' onclick='ClickOn(this)'> #直接传入this，指向当前调用的对象 function ClickOn(self){ //self 代指当前点击的标签 } -
2.调用时this绑定：
<input id='i1' type='button'> document.getElementById('i1').onclick = function(){ //this 代指当前点击的标签 } -
3.事件监听绑定：
tag1.addEventListener('click',function(){},false) #true捕捉，false冒泡 事件的冒泡（向上）和捕捉（向下）
