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值的标签对象
 
2、导航查找：必须是元素节点element标签对象调用

parentElement // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素

全部都是返回一个标签对象，并且js无法找到所有的兄弟标签

 

注意：涉及到查找标签的时候，要注意script标签的位置，一般要在标签的下面，script标签和style不一样，style必须写在head标签中，而script不用一定写在head标签中

 
 
三、节点操作
 
1、文本操作
》》》取值：：：获取文本节点的值：innerText    innerHTML
注意两者的区别：：：text只能取到标签中包含的文本，html既可以取到标签中包含的标签也能取到包含的文本
》》》赋值：：：记住是先清空标签原来包含的内容，再赋予新的值
标签对象.innertext="内容"   这个内容只能是文本内容，text识别不了标签，就是说内容里包含了标签innertext也只把整体当作一个文本赋值
标签对象.innerhtml="内容"  html就可以识别标签了，内容中如果包含了标签，赋值后就会包含新的标签
 
2、属性操作

》》》原生js方式：标签对象调用
element.setattribute（name，value）  创建属性名和属性值
element.getattribute（属性名）获取属性值
elementNode.removeAttribute(属性名)   删除属性
 
》》》DHTML方式：标签对象调用
element.属性名   获取属性值
element.属性名=属性值    修改属性值
 
》》》class属性操作：标签对象调用
element.className   获取class属性值
element.classlist.add（"具体的某个值"）  添加一个class值
element.classlist.remove（"具体的某个值"）  删除一个class值
注意重复的添加或删除一个class值是不会报错的，也就是无效操作
 
》》》css样式操作：标签对象调用，其实就是利用js给标签添加css属性
标签对象.style.css属性名="属性值"
比如：
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px
 
》》》value值操作
select和input和textarea标签都有固定的value属性
先找到标签，再调用.value属性修改，覆盖原有值
 
 
 
四、事件
 
1、事件类型
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击。

 

 
2、绑定事件的方式
 
（1）方式1：
利用标签内属性绑定事件，属性值为函数调用
举例：
<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       确认按钮被点击。

posted @ 2017-11-10 15:25  九二零  阅读(131)  评论(0)    收藏  举报