DOM
- DOM document object model 文档对象模型
【介绍】DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的属性结构
【注】“W3C 文档对象模型(DOM) 是中立于平台和语言的接口,程序和脚本动态地访问和更新文档的内容、结构和样式”
html css 页面内容
js 页面行为操作
【注】DOM是打通html、css和js壁垒的一个工具
2. DOM中节点种类一共有三种
【注】在JS中所有 节点都是对象
window.onload = function(){ //在页面加载完成以后执行的函数
var oDiv = document.getElementById("div1");
alert(oDiv.tagName); //DIV
}
<div id = "div1"></div>
window.onload = function(){ //在页面加载完成以后执行的函数
var oDiv = document.getElementById("div1");
alert(oDiv.innerHTML);//<em>协议</em>
oDiv.innerHTML = "<h1>我</h1>"
}
<div id = "div1"><em>协议</em></div>
(3)HTML属性的属性
id
title
style
className 在获取class, 不能直接class,必须使用className
访问这些属性:
元素节点.属性名
window.onload = function(){ //在页面加载完成以后执行的函数
var oDiv = document.getElementById("div1");
alert(oDiv.id); //div1
alert(oDiv.title);//hello
alert(oDiv.class);//undefined
alert(oDiv.className);//box
alert(oDiv.style);//[object CSS2Properties] 样式对象
alert(oDiv.style.width);//300px
//也可以通过样式进行修改
oDiv.style.width ="400px"
}
<div id= "div1" title = "hello" class = "box" style ="width:300px;height:300px;background-color:red"><em>协议</em></div>
在style样式中
background-color 使用 - 连接的属性 访问的时候,需要将 - 去掉,然后将后续单词的首字母大写
alert(oDiv.style.backgroundColor);
//进行修改的时候也可以
oDiv.style.backgroundColor = "blue";
(4)获取元素节点的方法1 getElementsByTagName
document.getElementsByTagName()
node.getElementsByTagName()
【注】从node节点开始,找出所有符合条件的元素节点
参数: 标签名
功能:获取当前页面上所有符合该标签名标准的元素节点
返回值:一个装有符合条件的元素节点的数组
window.onload = function(){
//获取当前页面上所有li标签
var aLis = document.getElementsByTagName("li");
alert(aLis);//[object HTMLCollection]是一个数组
alert(aLis.length);//8
//获取ul下的所有的li标签
var oUl = document.getElementById("ul1");
var aLis = oUl.getElementsByTagName('li');
alert(aLis.length); //4
for (var i= 0;i<aLis.length;i++){
alert(aLis[i].innerHTML);
//获取第一个 元素
①alert(aLis[i]);
②alert(aLis.item(i));
③alert(aLis.item(i).innerHTML);
}
}
<body>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<ol>
<li>55555</li>
<li>66666</li>
<li>77777</li>
<li>88888</li>
</ol>
</body>
(5)获取元素节点的方法2
getElementsByName
document.getElementsByName()
参数:name的值
返回值:装有复合条件的元素节点的数组
【注】documentByNames只能在document下,不能在某个节点下
【注】name属性一般情况下,只有文本输入框的元素节点才有
window.onload = function(){
var nodes = document.getElementByName("hello");
alert(nodes);//[object NodeList]
alert(nodes.length);//3
}
<div name= "hello"></div>
<div name = "hello"></div>
<input name = "hello"></div>
window.onload = function(){
var oDiv = document.getElementById("div1");
var nodes = oDiv.documentByNames("hello");//会报错,documentByNames只能在document下,不能在某个节点下
alert(nodes);//[object NodeList]
alert(nodes.length);//3
}
<div name= "hello"></div>
<div name = "hello"></div>
<input name = "hello"></div>
<div id="div1">
<span name = "hello"></span>
</div>
(6)获取元素节点的方法 3
getElementByClassName
node.getElementByClassName()
参数:class
功能:获取node节点下,所有符合条件的元素节点
返回值:所有符合条件的元素节点组成的数组
【注】getElementsByClassName在低版本IE浏览器不支持
window.onload = function(){
var nodes = document.getElementsByClassName("box");
alert(nodes);//object HTMLCollection
alert(nodes.length);//4
for(var i = 0; i<nodes.length;i++){
alert(nodes[i].innerHTML);
//22222
//44444
//55555
//77777
}
}
<ul id="ul1">
<li>11111</li>
<li class = "box">22222</li>
<li>33333</li>
<li class = "box">44444</li>
</ul>
<ol id= "ol1">
<li class = "box">55555</li>
<li>66666</li>
<li class = "box">77777</li>
<li>88888</li>
</ol>
window.onload = function(){
//获取ul下的class为box的元素节点
var oUl = document.getElementById("ul1");
var nodes = oUl.getElementsByClassName("box");
for(var i = 0; i<nodes.length;i++){
alert(nodes[i].innerHTML);
//22222
//44444
}
}
<ul id="ul1">
<li>11111</li>
<li class = "box">22222</li>
<li>33333</li>
<li class = "box">44444</li>
</ul>
<ol id= "ol1">
<li class = "box">55555</li>
<li>66666</li>
<li class = "box">77777</li>
<li>88888</li>
</ol>
window.onload = function(){
//获取ul下的class为box的元素节点
var oUl = document.getElementById("ul1");
var nodes = getElementsByClassName(oUl,"box");
for(var i = 0; i<nodes.length;i++){
alert(nodes[i].innerHTML);
//22222
//44444
}
}
封装函数,封装一个兼容的办法
* 通配符 任意类型的元素节点
function elementByClassName(parent,class){
//<1>找到parent下所有的元素节点
var nodes = parent.getElementByTagName('*');
var result = [];//用记录符合条件的元素节点
//<2>如果符合条件,添加到数组中
if(node[i].className == classStr){
result.push(node[i]);
}
return result;
}
(7)获取当前样式
#div1{
background-color:red;
}
window.onload = function(){
var oDiv = document.getElementById("div1");
alert(oDiv.style.width);//300px
alert(oDiv.style.backgroundColor);//获取不到
【注】只能找到行间的css样式
//获取当前有效样式
getComputedStyle(元素节点)[获取样式类型]
}
<div id = "div1" style = "width:300px;height:300px"></div>
div{
background-color:red;
width:300px;
}
#div1{
background-color:red;
width:400px;
}
window.onload = function(){
var oDiv = document.getElementById("div1");
/*获取当前有效样式
getComputedStyle(元素节点)[获取样式类型] 火狐/谷歌/safari支持*/
alert(getComputedStyle(oDiv)["width"]);//400px id比name的优先级要高
}
<div id = "div1" style = "height:300px"></div>
/*IE浏览器下获取当前样式
元素节点.currentStyle[获取样式类型];
【注】浏览器兼容*/
div{
background-color:red;
width:300px;
}
#div1{
background-color:red;
width:400px;
}
window.onload = function(){
alert(getStyle(oDiv,"width"); //400px
}
//获取当前样式的兼容函数
function getStyle(elem,attr){
return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
}
(8)总结
id document.getElementById()
tagName node.getElementsByTagName()
name document.getElementsByName()
className document.getElementsByClassName()
通过封装函数 简化上述的操作
封装一个函数,可以拥有上述几种获取元素节点的功能
【注】在css选择器
#id 通过id获取元素节点
.class 通过className获取元素节点
tagName 通过tagName获取元素节点
name=xxx 通过name获取元素节点
function $(vArg){
//<1>对参数进行区分
switch(vArg[0]){
case "#"://id
return document.getElementById(vArg.substring(1));
break;
case "."://className
return elementByClassName(document,vArg.substring(1));
break;
default:
//对参数的前五个字符,进行判断
var str = vArg.substring(0,5);
if( str == "name="){//name
return document.getElementByName(vArg.substring(5));
}else{
return document.getElementByTagName(vArg);
}
break;
}
}
function elementByClassName(parent,class){
//<1>找到parent下所有的元素节点
var nodes = parent.getElementByTagName('*');
var result = [];//用记录符合条件的元素节点
//<2>如果符合条件,添加到数组中
if(node[i].className == classStr){
result.push(node[i]);
}
return result;
}
window.onload = function(){
//id
//alert($("#div1").innerHTML);//111111
//className
//alert($(".box").length);//2
//alert($(".box")[1].innerHTML);//333333
//tagName
alert($("div").length);//4
// name
alert($("name=hello")[0].innerHTML);//444444
alert($("name=hello").length);//1
}
<div id = "div1">111111</div>
<div class = "box">222222</div>
<div class = "box">333333</div>
<div name= "hello">444444</div>