目录
一、DOM基础
1、DOM简介
DOM(Ducument Object Model)文档对象模型,DOM采用“树形结构”,用树节点来表示HTML页面的每一个元素。
html称为根节点,每一个元素就是一个节点,而每个节点就是一个对象,通过对对象的属性和方法操作,即可实现对元素操作。
2、节点类型
DOM节点共有12种,常见的有三种:
- 元素节点
- 属性节点
- 文本节点
如下:
节点的nodeType属性值
节点类型的注意事项:
- 一个元素就是一个节点,称为元素节点。
- 属性节点和文本节点是独立的节点,不属于元素节点。
- 只有元素节点才可以拥有子节点。
3、获取元素
获取元素,即获取元素节点,对于一个页面,我们要对某个元素进行操作首先要获得该元素。CSS里面通过选择器来获得元素,JavaScipt通过以下几种方式获得指定元素:
(1)getElementByld()
通过id来获取元素,该方法类似于CSS中的“id选择器”。
语法:document.getElementById("id名");
应用举例:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var myDiv=document.getElementById("div1");
myDiv.style.color="red";
document.getElementById("s").stysle.color="green";
}s
</script>
</head>
<body>
<div id="div1">获取元素测试</div>
<span id="s">要坚强,当然是选择原谅他啊!!!</span>
</body>
onload 事件会在页面或图像加载完成后立即发生。
(2)getElmenntsByTagName
该方法用于通过标签名来选中元素。
基本语法:
document.getElementsByTagName("标签名");
应用举例:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oul=document.getElementById("list");
var oli=oul.getElementsByTagName("li");
oli[1].style.color="red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
(3)getElementsByClassName()
该方法通过类名来获取元素。
语法:
docunment.getElementsByClassName(“类名”);
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oul=document.getElementsByClassName("select");
oul[1].style.color="red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">JavaScript</li>
<li class="select">Java</li>
</ul>
</body>
(4)querySelector()和querySelectorAll()
querySelector()表示选取满足条件的第一个元素;querySelectorAll()表示选取满足条件的所有元素。
应用举例:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oul=document.querySelectorAll(".select");
oul[1].style.color="red";
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">JavaScript</li>
<li class="select">Java</li>
</ul>
</body>
(5)getElementsByName()
该方法获取的也是一个类数组,可以通过数组下标的形式准确获取某个元素。可用于获取表单元素,如单选按钮和复选框。
应用举例:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oul=document.getElementsByName("select");
oul[1].checked=true;/*表示该元素被选中*/
}
</script>
</head>
<body>
<label><input type="radio" name="select" value="HTML"/>HTML </label>
<label><input type="radio" name="select" value="CSS"/>CSS </label>
<label><input type="radio" name="select" value="JavaScript"/>JavaScript</label>
</body>
(6)document.title和docunment.body
这两个方法分别用于获取页面的title和body两个元素。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
document.body.innerHTML="<p>测试body</p>";
}
</script>
</head>
<body>
4、创建元素
“动态DOM操作”,用JavaScript创建元素,这一元素在HTML中一开始是不存在的,HTML创建元素是静态的,而JavaScript创建元素是动态的。
使用JavaScript创建元素创建一个元素需要以下四步完成:
- 创建元素节点:createElement()
- 创建文本节点:createTextNode()
- 把文本节点插入元素节点:appendChild()
- 把组装好的元素插入到已有元素中:appendChild()
应用举例:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById(("content");
var oStrong=document.createElement("strong");//创建元素节点
var oText=document.createTextNode("测试创建元素");//创建文本节点
oStrong.appendChild(oText);//将文本节点插入到元素节点
oDiv.appendChild(oStrong);//将组装好的元素插入到div元素
}
</script>
</head>
<body>
<div id="content"></div>
</body>
5、插入元素
插入元素:即JavaScript把创建好的元素插入到已经存在的元素中,插入元素有两种方法:
appendChild()
insetBefore()
(1)appendChild()
该方法用于将一个新元素插入到父元素的内部子元素的末尾。
A.appendChild(B);
将新元素B插入到父元素A中的末尾。
(2)insetBefore()
该方法用于将新元素插入到父元素中的某个子元素之前。
A.insertBefore(B,ref);
将新元素B插入到父元素B中的ref元素之前。
6、删除元素
用于删除父元素下的某个子元素。
A.removeChild(B);
删除父元素A的子元素B
7、复制元素
使用cloneNode()方法来实现复制元素。
obj.cloneNode(bool)
obj表示被复制的元素
bool=true,表示复制元素本身及其复制该元素下的所有子元素。
bool=false,表示仅仅复制元素本身。
8、替换元素
A.replaceChild(new,old);
A为父元素,new为新子元素,old为旧子元素。
二、DOM进阶
1、HTML属性操作
html属性操作有两种方式:使用对象属性和使用对象方法
(1)使用对象属性对HTML属性操作
1)获取HTML属性值
获取属性值,通过属性名来找到该属性对应的值。
obj.attr
obj是元素名,是一个DOM对象;attr是属性名。
要想获得某个属性的值,首先要使用getElementById()等方法找到这个元素节点,然后才可以获取该属性的值。
应用举例:
点击按钮获取输入文本框的数据
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<input id="txt" type="text"/>
<input id="btn" type="button" value="获取"/>
<script type="text/javascript">
var oBtn=document.getElementById("btn");
oBtn.onclick=function()
{
var oTxt=document.getElementById("txt");
alert(oTxt.value);
}
</script>
</body>
2)设置HTML属性值
obj.attr="值";
obj是元素名,是一个DOM对象,attr是属性名。
(2)使用对象方法对HTML属性操作
1)getAttribute()
该方法用来获取元素的某个属性的值。使用对象属性方式无法获得自定义属性,而使用对象方法可以获得对象属性。
obj.getAttribute("attr")
obj是元素名,attr是属性名。
应用举例:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById("btn");
oBtn.addEventListener("click",function(){
alert(oBtn.getAttribute("id"));
},false)
};
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" data="test"/>
</body>
2)getAttribute()
该方法用来设置元素的某个属性。
obj.setAtrribute("attr","值")
obj是元素名,attr是属性名,“值”是要设置的属性值。
3)removeAttribute()
该方法用于删除元素的某个属性。
obj.removeAttribute("attr")
4)hasAttribute()
该方法用来判断元素是否含有某个属性。
obj.hasAttribute("attr")
2、CSS属性操作
(1)获取CSS属性值
使用getComputedStyle()方法来获取一个CSS属性的取值。JavaScript操作css属性用驼峰写法。
getComputedStyle(obj).attr
obj表示DOM对象,attr表示CSS属性名。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById("btn");
var oBox=document.getElementById("box");//获取CSS DOM对象
oBtn.onclick=function()
{
alert(getComputedStyle(oBox).backgroundColor);
}
};
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" data="test"/>
<div id="box"></div>
</body>
(2)设置CSS属性值
有两种方法设置:style对象和cssText()方法
1)style对象
obj.style.attr="值";
obj表示DOM对象,attr表示CSS属性名。该属性用驼峰写法。
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById("btn");
var oBox=document.getElementById("box");//获取CSS DOM对象
oBtn.onclick=function()
{
oBox.style.backgroundColor="blue";
}
};
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" data="test"/>
<div id="box"></div>
</body>
2)cssText属性
该属性可以用来同时设置多个CSS属性。注意该属性使用css写法,不能用骆驼峰写法。
obj.style.cssText="值";
应用举例:
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#box
{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById("btn");
var oBox=document.getElementById("box");//获取CSS DOM对象
oBtn.onclick=function()
{
oBox.style.cssText="width:50px;height=50px;background-color:blue;";
}
};
</script>
</head>
<body>
<input id="btn" type="button" value="按钮" data="test"/>
<div id="box"></div>
</body>