JavaScript基础(13_宿主对象DOM)
宿主对象DOM
DOM
-
Document Object Model 文档对象模型
-
常用节点分为四类：
-
文档节点：整个HTML文档
-
nodeName：#document
-
nodeType：9
-
nodeValue：null
-
-
元素节点：HTML文档中的HTML标签
-
nodeName：标签名
-
nodeType：1
-
nodeValue：null
-
-
属性节点：元素的属性
-
nodeName：属性名
-
nodeType：2
-
nodeValue：属性值
-
-
文本节点：HTML标签中的文本内容
-
nodeName：#text
-
nodeType：3
-
nodeValue：文本内容
-
-
文档的加载
-
onload事件会在整个页面加载完成之后才会触发
-
为window绑定onload事件
-
该事件对应的响应函数将会在页面加载完成之后执行
-
这样可以确保代码执行时，所有的DOM对象已经加载完毕了
-
-
浏览器在加载一个页面时，是按照自上向下的顺序进行加载的。
-
读取到一行就运行一行，如果将script标签写到页面上边
-
在代码执行时，页面还没有完成加载，所以在js代码中可能还没有找到这个元素/节点
-
-
window.onload = function () { var btn = document.getElementById("btn"); btn.onclick = function () { alert("这样就行了！"); }; }
DOM对象调用的方法
-
获取元素(标签)节点
-
通过document对象调用的方法
-
getElementById() 通过id属性获取一个元素点对象
-
getElementsByTagName() 通过标签名获取一组元素节点对象
-
返回一个类数组对象，所有查询到的元素都会封装到对象中
-
-
getElementsByName() 通过name属性获取一组元素节点对象
-
innerHTML 通过这个属性可以 获取到元素内部的html代码 （不适合自结束标签）
-
读取元素的属性，直接可以用语法： 元素.属性名 来进行获取属性值
-
元素.id
-
元素.name
-
元素.value
-
唯独class属性不能采用这种方式读取，读取class属性时需要使用： 元素.className
-
-
childNodes属性会获取包含文本节点在内的所有节点个数
-
根据DOM标签之间空白换行文本也会当成文本节点
-
注意:IE8及以下的浏览器中，不会将空白文本当成子节点
-
-
children属性可以获取当前元素的所有子元素
-
firstChild属性，表示当前节点的第一个子节点（包括空白文本）
-
-
父节点+兄弟节点
-
parentNode属性表示获取当前节点的父节点
-
previousSiblling属性表示获取当前节点的前一个兄弟节点
-
nextSibling属性表示获取当前节点的后一个兄弟节点
-
-
DOM查询方法
-
案例页//案例页面 <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="box1"> 我是第一个box1 <div>我是box1中的div</div> </div> <div class="box1"> 我是第二个box1 <div>我是第二个box1中的div</div> </div> <div id="box2">我是box2</div> </body> </html>
-
DOM查询
<script> // DOM查询 window.onload = function () { // 获取body标签 // var body = document.getElementsByTagName("body")[0]; var body = document.body; //效果同上 console.log(body) // 获取html根标签 var html = document.documentElement; console.log(html) // 代表页面中所有的元素 var all = document.all; // 根据元素的class属性值查询一组元素节点对象 // IE9以上才支持，IE8及以下版本不支持 var box1 = document.getElementsByClassName("box1"); // 获取页面中所有的div var divs = document.getElementsByTagName("div"); // 获取页面中class=box1中的所有div // css选择器选择的方法：.box1 div var div1 = document.querySelector(".box1 div"); var box2 = document.querySelector(".box1"); // 选择class=box1的所有元素中的第二个 var box3 = document.querySelectorAll(".box1")[1]; // 选择id=box2的所有元素中的第一个 var box4 = document.querySelectorAll("#box2")[0]; } </script>
DOM增删改
-
页面案例
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Document</title> <style> @CHARSET "UTF-8"; body { width: 800px; margin-left: auto; margin-right: auto; } button { width: 300px; margin-bottom: 10px; } #btnList { float:left; } #total{ width: 450px; float:left; } ul{ list-style-type: none; margin: 0px; padding: 0px; } .inner li{ border-style: solid; border-width: 1px; padding: 5px; margin: 5px; background-color: #99ff99; float:left; } .inner{ width:400px; border-style: solid; border-width: 1px; margin-bottom: 10px; padding: 10px; float: left; } </style> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div> <div><button id="btn02">将"广州"节点插入到#bj前面</button></div> <div><button id="btn03">使用"广州"节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div> </div> </body> </html> -
js操作
<script type="text/javascript"> window.onload = function() { //需求1：创建一个“广州”节点，添加到#city下 myClick("btn01",function () { // 1、创建广州节点 var li = document.createElement("li"); // console.log(li); var gzText = document.createTextNode("广州"); // console.log(gzText); /* document.appendChild() 可以向一个父节点中添加一个新的子节点 用法：父节点.appendChild(子节点) */ li.appendChild(gzText); // 2、添加到city下 // 获取id=city的节点 var city = document.getElementById("city"); city.appendChild(li); }); //需求2：将“广州”节点插入到#bj前面 myClick("btn02",function () { var li = document.createElement("li"); var gzText = document.createTextNode("广州"); var bj = document.getElementById("bj"); var city = document.getElementById("city"); li.appendChild(gzText); // 父节点调用insertBefore()方法 // 参数：第一个为需要插入的新元素，第二个为指定位置 city.insertBefore(li,bj); }); //需求3：使用“广州”节点替换#bj节点 myClick("btn03",function () { var li = document.createElement("li"); var gzText = document.createTextNode("广州"); var bj = document.getElementById("bj"); var city = document.getElementById("city"); li.appendChild(gzText); // 父节点.replaceChild(新节点, 旧节点) // 旧节点将被替换为新节点 if(bj){ city.replaceChild(li, bj); }; }); //需求4：删除#bj节点 myClick("btn04",function () { var bj = document.getElementById("bj"); var city = document.getElementById("city"); // 删除子节点 // 父节点.removeChild(需要删除的子节点对象) // 方法1： // if(bj){ // city.removeChild(bj); // }; // 获取子节点的父元素 // parent = bj.parentNode; // console.log(parent); // 方法2：好处是不用眼睛去判断bj的父节点是谁 if(bj){ // 子节点.parentNode.removeChild(子节点) bj.parentNode.removeChild(bj) }; }); //需求5：读取#city内的HTML代码 myClick("btn05",function () { var city = document.getElementById("city"); alert(city.innerHTML); }); //需求6：设置#bj内的HTML代码 myClick("btn06",function () { var bj = document.getElementById("bj"); bj.innerHTML = "昌平"; }); // 使用innerHTML属性，向#city中添加广州 // 结合appendChild() + innerHTML 搭配使用 myClick("btn07",function () { var city = document.getElementById("city") ; var li = document.createElement("li"); li.innerHTML = "广州"; city.appendChild(li); }); }; function myClick(idStr, fun) { var btn = document.getElementById(idStr); btn.onclick = fun; } </script>
使用DOM操作css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> #box1{ width: 200px; height: 200px; background-color: red; } </style> <script type="text/javascript"> window.onload = function () { /* 点击按钮以后，修改box1的大小 */ // 获取box1 var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function () { /* 通过js修改元素的样式； 语法: 元素.style.样式名 = 样式值 注意: 如果css样式名中含有 中横线- - 这种名称在js中是不合法的，比如background-color - 需要将这种样式名修改为驼峰命名法 - 比如background-color ,应该改为backgroundColor - 我们通过style属性设置的样式为 内联样式 - 内联样式有较高的优先级 - 如果再样式中写了!important 则此时js就无效了 */ box1.style.width = "300px"; box1.style.height = "300px"; box1.style.backgroundColor = "green"; }; // 点击按钮2以后，读取元素的样式 // 通过style属性设置和读取的都是内敛样式的信息 // 样式表中的样式无法读取 var btn02 = document.getElementById("btn02"); btn02.onclick = function () { alert(box1.style.width); } }; </script> </head> <body> <button id="btn01" >点我一下</button> <button id="btn02" >点我一下2</button> <div id="box1"></div> </body> </html>
使用DOM读取元素的样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <style> *{ margin: 0; } #box1{ width: 100px; height: 100px; background-color: yellow; } </style> <script type="text/javascript"> window.onload = function () { /* 点击按钮以后，修改box1的大小 */ var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function () { /* 获取元素当前显示的样式 语法：元素.currentStyle.样式名 读取当前元素显示的样式 只有IE8支持，其他浏览器都不支持 读取到的样式是只读 */ // alert(box1.currentStyle.backgroundColor); // 在其他浏览器中可以 使用 getComputedStyle()方法来获取元素当前的样式 // 需要两个参数，第一个要获取样式的元素，第二个可以传递一个伪元素，一般都为null // 该方法会返回一个对象，对象中封装了当前元素对应的样式； // 该方法不支持持ie8 及以下浏览器 // 读取到的样式是只读 // var obj = getComputedStyle(box1,null); // alert(obj.width); /* 自定义一个通用函数，用来获取指定元素的当前样式 提高兼容性 参数： obj 要获取样式的元素 name 要获取样式名 */ function getstyle(obj,name) { // 变量没有找到会报错，属性没有找到会返回Undefined，所以需要使用window if(window.getComputedStyle){ // 正常浏览器 return getComputedStyle(obj,null)[name]; }else{ // IE8的获取方式 return obj.currentStyle[name]; } }; console.log(getstyle(box1,"height")); } }; </script> </head> <body> <button id="btn01">点我一下</button> <div id="box1"></div> </body> </html>
