初步认识DOM · 前端菜鸟成长记

[TOC] ### 基本概念 1、文档：一个网页可以称为文档 2、节点：网页中的所有内容都是节点（标签、属性、文本、注释等） 3、元素：网页中的标签 4、属性：标签的属性 ***** ### 事件三要素 1、事件源: 被触发的对象 2、事件: 用户的操作、例如：鼠标点击，鼠标经过，鼠标离开 3、事件处理程序: 事件触发后要执行的代码(函数形式) ***** ### 获取元素的方法（6种） #### **a.根据id获取,返回的是id** ``` <input value = "我是input框" id = "btn"> var btn=document.getElementById(“btn”); ``` #### **b.根据标签名获取元素，返回值是集合（伪数组）动态获取** ``` <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> <p>哈哈,我又变帅了</p> var pObjs = document.getElementsByTagName("p");/*数组*/ ``` #### **c.根据name名获取元素。** 返回值是集合（伪数组）（于input框中使用） ``` <input type="button" value="显示效果" id="btn"><br /> <input type="text" value="您好" name="name1"/><br/> <input type="text" value="您好" name="name2"/><br/> <input type="text" value="您好" name="name1"/><br/> <input type="text" value="您好" name="name3"/><br/> <input type="text" value="您好" name="name1"/><br/> <input type="text" value="您好" name="name1"/><br/> <script> var inputs = document.getElementsName("name1");/*数组*/ </script> ``` #### **d.根据类名获取元素** 获取所有带有cls类的元素 ``` <p class="cls">这是另一个p</p> <span class="cls">这是第一个span</span><br/> <span>这是第二个span</span><br/> <div class="cls">这是第一个div</div> <div>这是第二个div</div> <script > var objs = document.getElementsByClassName("cls"); </script> ``` #### **e.根据id获取 ** 返回值是id本身 ``` <input type="button" value="显示效果" id="btn"/> var btnObj = document.querySelector("#btn"); ``` **注意记得加上#** #### **f.根据类名获取元素** **注意：要加 . ** 返回值是个数组 ``` <p class="cls">这是一个p</p> <span>这是一个span</span> <span class="cls">这是一个span</span> var objs = document.querySelectorAll(".cls");//是个伪数组 ``` 附：获取body元素的方法：document.body ###用户常见的事件点击事件(onclick) 鼠标经过（onmouseover）鼠标离开（onmouseout）焦点事件（onfocus）失去焦点事件（onblur） ####innerText和innerHTML的区别 ``` <style> div{ width: 300px; height: 200px; border: 2px dotted red; } </style> <input type="button" value="显示效果" id="btn"/> <input type="button" value="显示效果获取" id="btn2"/> <div id="dv"> 这是div <p>这是一个p</p> </div> <script> my$("btn").onclick=function () { //my$("dv").innerText="哈哈";//设置文本 //my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码 //my$("dv").innerHTML="哈哈"; //my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的 }; //获取 my$("btn2").onclick=function () { //可以获取标签中的文本内容 //console.log(my$("dv").innerText); console.log(my$("dv").innerHTML); }; </script> ``` **总结** 若直接设置纯文本 innerText 和 innerHTML是一样的，不过在带标签的情况下，innerText会把标签当成字符串，而innerHTML则不会若设置的内容里面有标签，推荐使用innerHTML 若设置的是纯文本，不带标签的推荐使用innerText **不管是设置还是获取，只要想获取纯文本内容使用innerText，如果想要文本和标签使用innerHTML** ### 自定义属性 getAttribute()、setAttribute()、removeAttribute() 操作的是标签的行内属性，不存在浏览器兼容性问题，称为标准方法。 * getAttribute() 获取标签行内属性 * setAttribute() 设置标签行内属性 * removeAttribute() 移除标签行内属性 * 设置自定义属性:setAttribute("属性的名字","属性的值") 获取自定义属性:getAttribute("属性的名字") 移除属性：removeAttribute("属性的名字") ``` <style> ul{ list-style: none; cursor: pointer; } </style> <ul id="uu"> <li>小明的成绩</li> <li>小丽的成绩</li> <li>小花的成绩</li> <li>小李的成绩</li> <li>乔峰的成绩</li> </ul> <script src="publick.js"></script> var list = my$("uu").getElementsByTagName("li"); //循环遍历 for(var i = 0; i < list.length; i++){ //先为每个li添加自定义属性 list[i].setAttribute("score",(i+1)*10); //点击每个li标签,显示对应的自定义属性值 list[i].onclick = function () { alert(this.getAttribute("score")); } } ``` **移除属性的例子** ``` <style> div{ width: 200px; height: 100px; background-color: pink; } .cls{ background-color: green; } </style> <input type="button" value="移除自定义属性" id="btn"> <div id="dv" score="10" class="cls"></div> <script src="publick.js"></script> <script> //点击按钮移除元素的自定义属性 my$("btn").onclick = function () { my$("dv").removeAttribute("score");//审查元素能看到这个score自定义属性没有了 //也可以移除元素的自带的属性 my$("dv").removeAttribute("class"); } </script> ```