DOM
介绍
DOM是JavaScript中操作网页的接口,简称文档对象模型(document Object Model)。它的作用是将网页转为一个JavaScript对象,从而可以使用脚本进行各种操作,如增、删、查、改等。DOM把网页和脚本以及其他的编程语言联系了起来,其结构类似于到树形,组成成分为节点。节点有:元素节点、注释节点(comment)、文本节点(空格、换行)、属性节点和根节点(document)。
DOM的选择器
元素节点选择器
id、class、name、tagname、高级、关系
<div id="box">1</div> <div id="box">2</div> <div id="box">3</div> <div class="msg"> <div class="sbox"> <h2>二级标题1</h2> <h2>二级标题2</h2> </div> <h2>二级标题3</h2> <h2>二级标题4</h2>
</div> <div class="cont">4</div> <div class="cont">5</div> <div class="cont">6</div> <span>7</span> <span><em>hello</em></span> <span>9</span> <input type="text" name="user"> <input type="text" name="user"> <input type="text" name="pass">
id : getElementById(id)
返回的是单个对象(获取指定元素的ID元素)
<script> var box = document.getElementById("box"); console.log(box) //<div id="box">1</div> </script>
class:getElementByClassName()
返回的是数组对象,如果要使用其中的元素,通过索引解析
<script> var acont = document.getElementsByClassName("cont") console.log(acont) //[div.cont,div.cont,div.cont] console.log(acont[0]) //<div class="cont">4</div> console.log(acont[0].innerHTML) //4 console.log(acont.innerHTML) //undefined </script>
tagname:getElementByTagName()
返回的是数组对象,如果要使用其中的元素,通过索引解析。获得相同元素的节点列表,通过标签名选择元素,返回值是一个数组。
<script> var aspan = document.getElementsByTagName("span") console.log(aspan) //[span,span,span] </script>
name:getElementsByName()
返回的是数组对象,如果要使用其中的元素,通过索引解析。通过class名获取元素,返回值是数组,通常用来获取有name
的input的值。
<script> var auser = document.getElementsByName("user") console.log(auser) //[input,input] </script>
注:1.不是所有标签都有name值 2.在低版本的浏览器中,getElementsByName和getElementsByClassName有兼容性
高级:ES5新增的选择器
querySelector:返回的是单个对象
var ele = document.querySelector("#box") //<div class="box">1</div> var ele = document.querySelector(".cont") //<div class="cont">4</div> var ele = document.querySelector("span") //<span>7</span> var ele = document.querySelector(".msg h2") //<h2>二级标题1</h2> var ele = document.querySelector(".msg>h2") //<h2>二级标题3</h2> console.log(ele)
querySelectorAll:返回的是数组对象,如果要使用其中的元素,通过索引解析,支持IE8+
var ele = document.querySelectorAll("#box") //[div#box,div#box,div#box] var ele = document.querySelectorAll(".cont") //[div.cont,div.cont,div.cont] var ele = document.querySelectorAll("span") //[span,span,span] var ele = document.querySelectorAll(".msg h2") //[h2,h2,h2,h2] var ele = document.querySelectorAll(".msg>h2") //[h2,h2] console.log(ele)
关系
父选子:(选择所有的子元素)
对象.children; //返回一个数组
var omsg = document.querySelector(".msg"); console.log(omsg.children); //[div.sbox,h2,h2]
子选父:
对象.parentNode; //返回一个元素
var osbox = document.querySelector(".sbox"); console.log(osbox.parentNode);
结果:
<div class="msg">
<div class="sbox">
<h2>二级标题1</h2>
<h2>二级标题2</h2>
</div>
<h2>二级标题3</h2>
<h2>二级标题4</h2>
</div>
第一个子元素:
对象.firstElementChild; //获得第一个非空白的子节点。(IE7/8不支持)
var omsg = document.querySelector(".msg"); console.log(omsg.firstElementChild) /*结果: <div class="sbox"> <h2>二级标题1</h2> <h2>二级标题2</h2> </div>*/
最后一个子元素:
对象.lastElementChild; //获得最后一个非空白的子节点。(IE7/8不支持)
var omsg = document.querySelector(".msg"); console.log(omsg.lastElementChild) //<h2>二级标题4</h2>
上一个兄弟:
对象.previousElementSibling //获得上一个兄弟节点。(IE7/8不支持)
var omsg = document.querySelector(".msg"); console.log(omsg.previousElementSibling) //<div id="box">3</div>
下一个兄弟:
对象.nextElementSibling //获得下个兄弟节点。(IE7/8不支持)
var omsg = document.querySelector(".msg"); console.log(omsg.nextElementSibling) //<div class="cont">4</div>
其他选择器:
<span>qwe</span> <div class="box"><span>1</span> <p>2</p> hello <!-- 这是注释 --> <em>3</em></div> <span>zxc</span>
父选子节点:选择所有子节点
对象.childNodes //获取当前元素节点的所有子节点
var obox = document.querySelector(".box") console.log(obox.childNodes) //[span,text,p,text,comment,text,em]
上一个兄弟:
对象.previousString
//获得上一个兄弟节点。(包含空白节点和注释。IE7/8包括注释节点,不包括空白节点
var obox = document.querySelector(".box") console.log(obox.previousSibling) //#text
下一个兄弟:
对象.nextString
//获得下一个兄弟节点。(包含空白节点和注释,IE7/8包括注释节点,不包括空白节点
var obox = document.querySelector(".box") console.log(obox.nextSibling) //#text
第一个子:
对象.firstChild //获得第一个子节点。(IE7/8非空白节点,可能是注释节点)
var obox = document.querySelector(".box") console.log(obox.firstChild) //<span>|</span>
最后一个子:
对象.lastChild
//获得最后一个子节点(IE7最后一个元素节点,IE8最后一个非空白节点,可能是注释节点)
var obox = document.querySelector(".box") console.log(obox.lastChild) //<em>3</em>
过滤空白节点:
<div class="box">hello world</div> var div = document.createElement("div") console.log(div) document.body.appendChild(div)
<div class="box">hello world</div> var obox = document.querySelector(".box") obox.remove() document.body.removeChild(box)
伪数组:假数组,可以使用索引和长度遍历
但是不能使用数组的方法
所有的DOM选择器,返回的数组,都是伪数组
arguments
真数组:既能通过索引和长度遍历,也可以使用数组的方法
可见:
分为内置与非内置
1).内置
系统提供对象的操作方法:get/set/remove Attribute()
<div class="box" a="10" b=20 id="cont" title="这是一个div"> var obox = document.querySelector(".box"); console.log(obox.title) //这是一个div obox.title = "1231321"; console.log(obox.className) //box obox.className = "hahah" console.log(obox.className) //hahah
console.log(obox.getAttribute("title")) //1231321
console.log(obox.getAttribute("class")) //hahah
2).非内置
get/set/remove Attribute()
console.log(obox.getAttribute("a")) obox.setAttribute("a","hello") //10 obox.setAttribute("c","world") obox.removeAttribute("a") obox.removeAttribute("b") obox.removeAttribute("c")
不可见:看不见
1).内置:对象的操作
console.log(obox.innerHTML); //可以解析标签 console.log(obox.innerText); //不可以解析标签
2).非内置:对象的操作
元素本身的类型,对象
对象,作为真正的对象操作
obox.abc = "hahahah" console.log(obox.abc) //hahahah
获取非行内样式(兼容问题)
function getStyle(obj,attr){ //获取非行间样式,obj是对象,attr是值 if(obj.currentStyle){ //针对ie获取非行间样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; //针对非ie }; };