-
DOM简介
DOM :Document Object Model 文档对象模型
HTML DOM树 :
DOM树模型
-
DOM HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM</title>
<style type="text/css">
div{
border: 1px gray solid;
margin: 5px;
padding: 5px;
width: 120px;
}
</style>
</head>
<body>
<h3>结果:</h3>
<div>
<p id="test">Test01</p>
<button onclick="changeContent()">changeContent</button>
</div>
<div>
<p>Test02</p>
<button onclick="changeAttributes()">changeAttributes</button>
</div>
<script>
document.write("<br />"+"改变输出流!");//直接写入文档流,无需标签
function changeContent(){
var p = document.getElementById("test");//通过id获取元素
p.innerHTML = "改变元素内容";//改变元素原有的内容
}
function changeAttributes(){
var pArr = document.getElementsByTagName("p");//通过标签名获取所有的p标签数组
pArr[1].hidden = "hidden";//改变元素的属性
}
</script>
</body>
</html>
原图
改变后图
-
DOM CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM</title>
<style type="text/css">
div{
border: 1px gray solid;
margin: 5px;
padding: 5px;
width: 120px;
}
</style>
</head>
<body>
<h3>结果:</h3>
<div>
<p id="test">Test01</p>
<button onclick="changeColor()">changeColor</button>
</div>
<div>
<p class="test02">Test02</p>
<button onclick="changeVisibility()">changeVisibility</button>
</div>
<script>
function changeColor(){
document.getElementById("test").style.color = "red";//改变元素样式里的颜色
}
var visibility = true;
function changeVisibility(){//改变元素的显隐性
if(visibility){
document.getElementsByClassName("test02")[0].style.visibility = "hidden";
}else{
document.getElementsByClassName("test02")[0].style.visibility = "visible";
}
visibility = !visibility;
}
</script>
</body>
</html>
原始
点击后
-
DOM事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM</title>
<style type="text/css">
div{
border: 1px gray solid;
margin: 5px;
padding: 5px;
width: 180px;
}
</style>
</head>
<body onload="alert('欢迎使用!')">
<h3>结果:</h3>
<div>
<!--为button添加一个onclick事件,即当按钮被点击时执行的动作-->
<p id="test">Test01</p>
<button onclick="changeColor()">changeColor</button>
</div>
<!--为div元素添加鼠标在元素上与不在元素上的事件动作-->
<div id="test02" onmouseover="overBgcolor()" onmouseout="outBgcolor()">
<p>Test02</p>
</div>
<!--为元素div添加鼠标按下与松开的事件动作-->
<div id="test03" style="color: white;background-color: blue;" onmousedown="downChange()" onmouseup="upChange()">
鼠标松开
</div>
<!--为元素input添加内容改变的事件动作-->
<div>
<input type="text" onchange="inputChange(this)"/>
<p id="test04" style="color: red;">无输入</p>
</div>
<!--为元素input添加获得焦点与失去焦点时的事件动作-->
<div>
<input type="text" placeholder="输入" onfocus="this.placeholder=''" onblur="this.placeholder='输入'"/>
</div>
<script>
//当按钮被点击时执行此方法
function changeColor(){
document.getElementById("test").style.color = "red";
}
//当鼠标在元素上与不在元素上时执行的方法
function overBgcolor(){
document.getElementById("test02").style.backgroundColor = "green";
}
function outBgcolor(){
document.getElementById("test02").style.backgroundColor = "white";
}
//当鼠标按下与松开时执行的方法
function downChange(){
document.getElementById("test03").style.backgroundColor = "blueviolet";
document.getElementById("test03").innerHTML = "鼠标按下";
}
function upChange(){
document.getElementById("test03").style.backgroundColor = "blue";
document.getElementById("test03").innerHTML = "鼠标松开";
}
//当输入值改变时执行此方法
function inputChange(ele){
var inputTxt = ele.value;
var pTxt = "";
if(inputTxt==""||inputTxt==undefined){
pTxt = "无输入";
}else if(isNaN(inputTxt)){
pTxt = "非数字";
}else{
pTxt = "数字";
}
document.getElementById("test04").innerHTML = pTxt;
}
</script>
</body>
</html>
加载时
加载完成--初始
点击1--鼠标放2
一直按3--输入4
更改4--焦点放5
-
DOM节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM</title>
<style type="text/css">
.code{
color: gray;
border: 1px solid gainsboro;
font: "微软雅黑";
font-size: 16px;
}
pre{
margin: 1em -19em;
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
padding: 0.1em 0.5em;
}
h3{
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<h3>创建节点</h3>
<h4>代码:</h4>
<div class="code">
<pre>
var div = document.getElementById("node01");
var p = document.createElement("p");
var pTxt = document.createTextNode("创建节点");
//将文件加入p,将p加入div
p.appendChild(pTxt);
div.appendChild(p);
</pre>
</div>
<h4>结果:</h4>
<div id="node01" class="result"></div>
<hr />
<script>
var div = document.getElementById("node01");
var p = document.createElement("p");
var pTxt = document.createTextNode("创建节点");
//将内容加入p,将p加入div
p.appendChild(pTxt);
div.appendChild(p);
</script>
</li>
<li>
<h3>删除节点</h3>
<h4>代码:</h4>
<div class="code">
<pre>
var div = document.getElementById("node02");
var p1 = document.getElementById("node03");
var p2 = document.getElementById("node04");
//方式1:
div.removeChild(p1);
//方式2:
p2.parentNode.removeChild(p2);
</pre>
</div>
<h4>结果:</h4>
<div id="node02" class="result">
<p id="node03">删除节点</p>
<p id="node04">删除节点</p>
</div>
<hr />
<script>
var div = document.getElementById("node02");
var p1 = document.getElementById("node03");
var p2 = document.getElementById("node04");
//方式1:
div.removeChild(p1);
//方式2:
p2.parentNode.removeChild(p2);
</script>
</li>
</ul>
</body>
</html>
创建节点
删除节点
网友评论