0522js ------DOM操作

目录一、DOM初相识1.DOM简介2.事件前言方式一、方式二、方式三、3.文档的加载二、DOM获取1.getElementById()2.getElementsByTagName()(1)根据标签名来获取一组元素节点对象(2)获取某个元素父元素内部所有指定标签名的元素3.getElementsByName()4.getElementsByClassName()5.childNodes、children6.firstChild、firstElementChild7.返回某元素的父节点8.返回某元素的前/后一个兄弟节点9.获取body标签10.获取html根标签11.获取页面中所有的元素12.document.querySelector()document.querySelectorAll()一、DOM初相识1.DOM简介文档对象模型Document Object Model 简称DOM它就是一些系列编程接口有了这些接口就可以改变页面内容结构和样式DOM树文档一个页面就是一个文档DOM中使用document表示元素页面中所有的标签都是元素DOM中使用element表示节点网页中所有内容都是节点标签、属性、文本、注释等DOM中使用node表示DOM把以上内容都看作是对象2.事件前言事件就是用户和浏览器之间的交互行为比如点击按钮鼠标移动关闭窗口.....事件非常多为了方便演示先学简单的事件后面再详细学习方式一、标签中对应的属性(事件属性)中设置一些js代码这样当事件被触发时这些代码将会被执行这种方式结构与行为耦合不方便维护不推荐使用button idbtn onclickalert(哈喽);我是一个按钮/button //onclick点击事件点击的时候触发方式二、现在需要学习的可以为按钮的对应事件绑定处理函数的形式来响应事件这样当事件被触发时其对应的函数将会被调用body button idbtn我是一个按钮/button script //第一步获取按钮对象 var btndocument.getElementById(btn); //第二步绑定一个单击事件 //像这种为单击事件绑定的函数我们称为单击响应函数 btn.onclickfunction(){ alert(你好) } /script /body方式三、btn.addEventListener(事件名,事件回调button idbtn按钮/button !-- js中操控标签前提是你要选中这个标签 -- script //获取按钮button元素 let btn document.getElementById(btn) //事件绑定3 btn.addEventListener(事件名,事件回调 btn.addEventListener(click, fun) btn.addEventListener(click, fun1) function fun() { for (let i 0; i 1; i) { alert(fun) } } function fun1() { for (let i 0; i 1; i) { alert(fun1) } } //·····3.文档的加载浏览器在加载一个页面时是按照自上向下的顺序加载的读取到一行就运行一行,如果将script标签写到页面的上边 在代码执行时页面还没有加载页面没有加载DOM对象也没有加载 会导致无法获取到DOM对象。第一种加载情况将js代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码script let btn document.getElementById(btn); btn.addEventListener(click, function () { console.log(1); }); /script第二种加载写法onload事件会在整个页面加载完成之后才触发 为window绑定一个onload事件 该事件对应的响应函数将会在页面加载完成之后执行 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了window.onload function () { //获取id为btn的按钮 var btn document.getElementById(btn); //为按钮绑定一个单击响应函数 btn.onclick function () { alert(hello); }; };二、DOM获取1.getElementById()通过id属性获取一个元素节点对象参数id是大小写敏感的字符串返回的是一个元素对象补充1innerHTML 通过这个属性可以获取元素标签体的内容获取标签空白内容补充2innerText 通过这个属性可以获取元素标签体的内容只能获取文本script typetext/javascript window.onload function () { let bj document.getElementById(bj); // 读取 console.log(bj.innerHTML);// a href#1、吃饭/a console.log(bj.innerText);// 1、吃饭 // 修改 bj.innerHTML h2吃饭/h2;//吃饭 //识别标签 bj.innerText h2吃饭/h2;//h2吃饭/h2 //不识别标签把标签当普通文本 }; /script //样式 style * { padding: 0; margin: 0; list-style: none; text-decoration: none; } #happy { width: 400px; margin: 0 auto; background-color: pink; } /style /head body div idhappy h2最喜爱的三件事/h2 br / ul idlist1 li idbj a href#1、吃饭/a /li li classmm2、睡觉/li li classmm3、学习/li /ul2.getElementsByTagName()(1)根据标签名来获取一组元素节点对象let lis document.getElementsByTagName(li);//获取文档中所有的li let list1 document.getElementById(list1); let lis2 list1.getElementsByTagName(li); //通过标签名获取对应父元素下的子元素 console.log(lis[0]);(2)获取某个元素父元素内部所有指定标签名的元素注意父元素必须是单个对象必须指明是哪一个元素对象获取的时候不包括父元素自己//获取id为city的元素 var city document.getElementById(city); /* 1:city.getElementsByTagName(); 获取元素下的一组节点 */ var lis city.getElementsByTagName(li);3.getElementsByName()s可以看出获取的DOM节点放在尾数组中通过name属性获取一组元素节点对象这个name属性一般放在input里面input是自结束标签没有标签体它的内容就是它的value值补充2 innerHTML用于获取元素内部的HTML内容的对于自结束标签这个属性没有意义注意class属性不能采用这种方式读取class属性时需要使用 元素.classNamevar btn03 document.getElementById(btn03); btn03.onclick function () { var inputs document.getElementsByName(gender); //alert(inputs.length); for (var i 0; i inputs.length; i) { //alert(inputs[i].innerHTML); // alert(inputs[i].value); alert(inputs[i].className); } };4.getElementsByClassName()通过class属性获取一组元素节点对象 不支持IE8及以下浏览器var btn04 document.getElementById(btn04); btn04.onclick function () { var classs document.getElementsByClassName(inner); for (var i 0; i classs.length; i) { alert(classs[i].className); } };5.childNodes、children返回父元素下的所有子节点1、childNodes属性会获取包括文本节点在内的所有节点DOM标准标签间的空白也会被当成文本节点2、children属性可以获取当前元素的所有子元素不包括空白文档了这个用的比较多let list document.getElementById(list); console.log(list.children);//子元素不包括空白节点 console.log(list.childNodes);//包括空白节点6.firstChild、firstElementChild返回父元素下的第一个子节点1、firstChild第一个子节点(包括空白的文本节点)2、firstElementChild获取当前元素的第一个子元素3、lastChild最后一个子节点(包括空白的文本节点)4、lastElementChild获取当前元素的最后一个子元素let list document.getElementById(list); let f1 list.firstChild; //第一个子节点包括空白 let f2 list.firstElementChild; //第一个子元素 let l1 list.lastChild; //最后一个子节点包括空白 let l2 list.lastElementChild; //最后一个子元素 console.log(l1); console.log(l2);7.返回某元素的父节点语法某元素.parentNode某元素.parentElementlet bj document.getElementById(bj); console.log(bj.parentNode); console.log(bj.parentElement);8.返回某元素的前/后一个兄弟节点1、previousSibling返回前一个兄弟节点 也有可能获取到空白的文本2、previousElementSibling返回前一个兄弟元素不包括空白文本注意不支持ie8及以下的浏览器3、nextSibling返回下一个兄弟节点 也有可能获取到空白的文本4、nextElementSibling返回下一个兄弟元素不包括空白文本注意不支持ie8及以下的浏览器let bj document.getElementById(bj); console.log(bj.previousSibling);//前一个子节点包括空白 console.log(bj.previousElementSibling); console.log(bj.nextSibling);//后一个子节点包括空白 console.log(bj.nextElementSibling);9.获取body标签//方法一 var bodydocument.getElementsByTagName(body)[0]; //方法二 var body document.body10.获取html根标签var html document.documentElement;11.获取页面中所有的元素//第一种方式 var alldocument.all; //第二种方式 var all document.getElementsByTagName(*)12.document.querySelector()document.querySelectorAll()根据一个css选择器来查询let box document.querySelector([id]); let boxs document.querySelectorAll(#box1div); console.log(box);