1.关于DOM
Document Object Model(文档对象模型)。 多用来处理和表示HTML和XML文档。
DOM是针对xml、html的基于树的API。
DOM树定义了节点Node的接口以及许多节点类型来表示文档不同功能不同方面的节点。
DOM结构理解为树型结构,节点就是树枝分叉处的那个点。
2.Js Dom 编程
差不多就是利用document(代表着浏览器中打开的文档)对象,来对网页中形成的dom树进行操作,操作其节点。
也就是用js来操作html中的各元素。
3.document中的常用方法:
getElementById():根据id获得唯一的元素;
getElementsByTagName();根据标记名获得所有此标识元素
getElementsByName();根据组件名获得所有元素
getElementsByClassName():根据类名来获得所有元素
parentElement:父元素
children:所有子元素的集合
previousElementSibling:前一个兄弟元素
nextElementSibling:前一个兄弟元素
进行操作(curd)常用方法:
createElement():创建一个元素;
appendChild():将一个元素追加到当前的元素中;
insertBefore();将一个元素插入到另一个元素之前
removeChild():删除子元素
replaceChild();替换子元素
insertAdjacentHTML(position,html):将一个html片断插入到某个元素的指定位置a,
位置有四个值 beforeBegin,afterBegin,beforeEnd,afterEnd;
简单实例:1.
<html>
<head>
<script language="javascript">
function test(){
document.write("hello,world");
}
</script>
</head>
<body>
<input type="button" value="点击" id="but_1">
<script language="javascript">
document.getElementById("but_1").οnclick=test;
</script>
</body>
</html>
2.二级省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
function getCity(){
var citys = [[],["呼市","锡市","包头"],["哈尔滨","大庆","牡丹江","佳木斯"],["大理","丽江","昆明"]];
var province = document.getElementById("province");
var index = province.selectedIndex;
var city= citys[index];
var cityNode = document.getElementById("city");
var children = cityNode.childNodes;
for(var i = 0; i<children.length ;){
cityNode.removeChild(children[i]); //删完i自动+1
}
cityNode.options.length = 1 ;
for(var i = 0; i<city.length ; i++){
var option = document.createElement("option");
option.innerHTML = city[i];
cityNode.appendChild(option);
}
}
</script>
</head>
<body>
省份<select id="province" οnchange="getCity()">
<option>省份</option>
<option>内蒙古</option>
<option>哈尔滨</option>
<option>云南</option>
</select>
城市<select id="city"><option>城市</option></select>
</body>
</html>