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
=
48px
onclick 当用户点击某个对象时调用的事件句柄。
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 确认按钮被点击。