DOM
document object model 文档对象模型
(DOM是“w3c文档对象模型”,是中立于平台和语言的接口,他允许程序和脚本动态的访问和更新文档的内容,结构,和样式)
html,css页面内容
js页面行为操作
【注】DOM是打通html,css,js,壁垒的工具
DOM的分类(3种)
<div title="属性节点">测试div</div>
1.元素节点:<div></div>
2.属性节点:title="属性节点"
3.文本节点:测试div
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
获取元素节点
id document.getElementById()
tagName node.getElementsByTagName()
name document.getElementsByName()
className document.getElementsByClassName()
查找元素节点
方法一: document.getElementById(id);
通过当前元素节点的id,获取相应元素节点
元素节点属性:通过这个节点对象,访问它的一系列属性
访问 得到的节点.id
得到的节点.title
得到的节点.className
得到的节点.style 包括[ 得到的节点.style.width/ 得到的节点.style.height/ 得到的节点.style.backgroundColor-----]
HTML属性的属性
属性 说明
id 元素节点id的名称
title 元素节点的title属性值
style css内联样式属性值
className css元素的类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){//在页面加载完成以后执行的函数
var odiv=document.getElementById("div1");
alert(odiv);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
结果:
[object HTMLDivElement]
tagname:获取元素节点的标签名
eg.【放在上述代码】
alert(odiv.tagname);----是DIV
innerHTML:获取元素节点标签间的内容,解析标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var odiv2=document.getElementById("div2");
] alert(odiv2.innerHTML);//结果:<em>协议</em>
}
</script>
</head>
<body>
<div id="div2"><em>协议</em></div>
</body>
</html>
在style样式中,background-color访问的时候,需要将-去掉然后将后续单词的首字母大写
访问class要写className
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var odiv3=document.getElementById("div3");
alert(odiv3.style.backgroundColor);//red
alert(odiv3.style);//[object CSSStyleDeclaration]
alert(odiv3.style.width);//300px
alert(odiv3.id);//div3
alert(odiv3.title);//hello
alert(odiv3.className);//box
odiv3.style.width="400px";//设宽度为400px
odiv3.style.backgroundColor="blue";//设背景颜色为蓝色
odiv.title="world";//设标题为world
odiv.className="oxb";//设class为oxb
}
//这些值可以在浏览器右键检查元素查看
</script>
</head>
<body>
<div id="div3" title="hello" class="box" style="width:300px;height:300px;background-color: red;">
<em>协议</em>
</div>
</body>
</html>
方法二: getElementsByTagName()
参数:标签名
功能:获取当前页面上所有符合该标签名的标准的元素节点
返回值:一个装有符合条件的元素节点的数组
node.getElementsByTagName()从node结点开始,找出所有符合条件的元素节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var alis=document.getElementsByTagName("li");
alert(alis);//[object HTMLCollection]数组
alert(alis.length);//6
//获取ul下的所有li标签
//先获取ul这个节点
//再node.getElementsByTagName(),从node结点开始,找出所有符合条件的元素节点,oul.getElementsByTagName("li");
var oul=document.getElementById("ul1");
var alis=oul.getElementsByTagName("li");
alert(alis.length);//3
for(var i=0;i<alis.length;i++){
alert(alis[i].innerHTML);//111 222 333
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>444</li>
<li>555</li>
<li>666</li>
</ol>
</body>
</html>
方法3:document.getElementsByName()
参数:name的值
返回值:装有符合条件的元素节点的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var nodes=document.getElementsByName("hello");
alert(nodes);//[object NodeList]
alert(nodes.length);//3
//注意:name属性一般情况下只有文本输入框的元素节点才有
1.var odiv=document.getElementById("div4");
2.var nodes=odiv.getElementsByName("hello");//错的
3.alert(nodes.length);
这三行不支持不能这么写,不能写node.getElementsByName(" ");
}
</script>
</head>
<body>
<div name="hello" id="div4"></div>
<span name="hello"></span>
<div name="hello" id="div5"></div>
</body>
</html>
方法4:node.getElementByClassName
低版本的IE不支持
功能:获取node节点下,所有符合条件的元素节点
参数:class
返回值:所有符合条件的元素节点组成的数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
// var nodes=document.getElementsByClassName("box");
// alert(nodes);//[object HTMLCollection]
// alert(nodes.length);//3
// for(var i=0;i<nodes.length;i++)
// alert(nodes[i].innerHTML);// 222 777 555
//
//获取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); //222 777
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>111</li>
<li class="box">222</li>
<li>333</li>
<li class="box">777</li>
</ul>
<ol>
<li>444</li>
<li class="box">555</li>
<li>666</li>
</ol>
</body>
</html>
–封装函数,封装一个兼容的办法,使IE与其他浏览器都可以用