/***********************************index.html*****************************************/
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<script src="3.js"></script>
<title>js---DOM</title>
<style>
.bb{
width:200px;
height:200px;
background:red;
}
.cc{
width:200px;
height:200px;
background:green;
}
</style>
</head>
<body>
<div id="box"><span>盒子</span>模型</div>
</body>
</html>
/**********************************js操作********************************************/
window.onload = function(){
//想要操作盒子box 必须先找到box
//通过id查找
var box = document.getElementById("box");
//打印所有的子节点
//document.write(box.childNodes); //object NodeList
//document.write(box.childNodes.length); //<span>模型</span><div>盒子</div>
//模型
//alert(box.childNodes[0].nodeName); //大儿子 span
//alert(box.childNodes[1].nodeName); //二儿子 #text 文本的
//alert(box.childNodes[1].nodeType); //span #text 3
//alert(box.childNodes[1].nodeValue); //模型
//alert(box.childNodes[0].childNodes[0].nodeValue);
//获取大儿子(第一个儿子节点childNodes[0])
//alert(box.firstChild.nodeName);
//获取最后一个子节点
alert(box.lastChild.nodeName);
}
/***********************************index.html*******************************************/
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<script src="1.js"></script>
<title>js---DOM</title>
<style>
.bb{
width:200px;
height:200px;
background:red;
}
.cc{
width:200px;
height:200px;
background:green;
}
</style>
</head>
<body>
<div id="box" aaa="bbb" title="盒子" name="dd" class="bb" style="width:100px;height:100px; background:#ccc;">盒子模型</div>
</body>
</html>
/***********************************js操作返回***************************************/
window.onload = function(){
//想要操作盒子box 必须先找到box
//通过id查找
//var box = document.getElementById("box");
//获取id属性
//alert(box.id);
//获取title属性
//alert(box.title);
//获取name
//alert(box.name); //undefined
//获取class
//alert(box.className); //undefined
//box.className = "cc";
//获取style
//alert(box.style); //返回是 object CSSStyleDeclaration item() 方法返回 CSS 样式中指定索引位置的属性名,索引值从 0 开始。
//获取宽度
//alert(box.style.width);
//获取背景色
//alert(box.style.backgroundColor); //rgb(204, 204, 204)
//获取aaa属性的值(不合法)
alert(box.aaa); //null
}
不太懂 自己翻翻看看 许多时候 吧js 当成PHP去写 也是一件很头疼的事 哎 !