11月10日学习内容整理：DOM对象的节点，查找标签，文本操作，属性操作，事件
一、DOM对象中的节点
节点node就是标签对象
文档节点document 一个html文件就是一个文档
元素节点element 就是标签
属性节点attribute 就是标签的属性
文本节点text 就是标签包含的文本
》》》节点之间的关系：：
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
#####我们只关心文档节点document和元素节点element就可以了
二、如何查找节点
1、直接查找：必须是文档节点document调用
》》》通过ID值查找：document.getElementById(“idname”)
输出的是一个标签对象，可以直接拿来用
》》》通过标签名查找：document.getElementsByTagName(“tagname”)
输出的是一个数组对象，里面的数组元素都是同一级中所有对应标签名的标签对象。必须通过索引取值才能得到每个标签对象
》》》通过name属性值查找：document.getElementsByName(“name”)
这个通常不用
》》》通过class值查找：document.getElementsByClassName(“name”)
输出的是一个数组对象，数组的元素都是同一级中满足class值的标签对象，也要通过索引取值才能得到每个标签对象
注意只能是同一级中的，无法找到后代中对应class值的标签对象parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
全部都是返回一个标签对象，并且js无法找到所有的兄弟标签
注意：涉及到查找标签的时候，要注意script标签的位置，一般要在标签的下面，script标签和style不一样，style必须写在head标签中，而script不用一定写在head标签中
》》》原生js方式：标签对象调用
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue"; .style.fontSize=48pxonclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
<div id="div" onclick="foo(this)">点我呀</div>
<script>
function foo(self){ // 形参不能是this;
console.log("点你大爷!");
console.log(self);
}
</script>
（2）方式2：
在script节点中绑定，因为若直接在标签的属性中绑定的话就涉及到耦合问题了，把html标签和事件强耦合在一起
标签对象.on事件=function（）｛｝
比如：
<p id="abc">试一试!</p>
<script>
var ele=document.getElementById("abc");
ele.onclick=function(){
console.log("ok");
console.log(this); // this直接用
};
</script>
》》》》注意注意注意：：：：：：this的用法
this指代的就是当前的标签对象，在函数中我们通常使用this，而且this不能用做形参，下面举个例子说明使用this的必要性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<p onclick="foo(this)">hello</p>-->
<p id="p1">hello</p>
<ul>
<li class="item">111</li>
<li class="item">222</li>
<li class="item">333</li>
</ul>
<script>
var eles_li=document.getElementsByClassName("item");
for (var i=0;i<eles_li.length;i++){
eles_li[i].onclick=function () {
alert(this.innerText); //this就是指通过索引取值得到的标签对象
}
}
</script>
</body>
</html>
this不能被eles_li[i]取代，因为for循环做的事就是把查找到的class值为item的数组对象中每一个标签对象都绑定上click事件，但是并不会触发事件的执行，也就是函数的执行，所以等到页面加载完后这个i值就是最后跳出循环时候的值，等用户点击触发事件函数的执行时，程序这时就找不到对应的eles_li[i]标签对象了，因为此时i已经超出范围了就会报错，所以这里就只能用this来指代每一次绑定事件时的标签对象
onclick 当用户点击某个对象时调用的事件句柄。ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress 某个键盘按键被按下并松开。onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。onmousemove 鼠标被移动。onmouseout 鼠标从某元素移开。onmouseover 鼠标移到某元素之上。onmouseleave 鼠标从元素离开
onselect 文本被选中。onsubmit 确认按钮被点击。
