您的位置：首页 > Web前端 > JavaScript

JavaScript—————DOM

2015-10-27 19:02 603 查看

可以使用JavaScript提供的DOM对象的方法和属性对

标记文档（html，xml）进行操作

首先将文档里的所有内容封装成对象，再使用DOM解

析html。

一、DOM中的对象

document对象：整个html文档

element对象：元素/标签对象

属性对象

文本对象

Node对象：以上对象的父对象

1.document对象

常用方法：

——write()：向页面输出变量值

向页面输出html代码

——getElementById()：根据标签的id获取到标签对象

——getElementsByName()：根据标签的name值获取到多个标签对象

——getElementsByTagName()：根据标签的名称获取到多个标签对象

2.Element对象

常用方法：

——getAttribute("属性名")：获取属性的值

——setAttribute("属性名"，"属性值")：设置属性值

——removeAttribute("属性名")：删除某属性

——getElementsByTagName()：根据子标签的名称获取到多个子标签对象

<!--实现多选，全选，反选-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="allbox" onclick="selAll();"/>全选
</br>
<input type="checkbox" name="hobty"/>唱歌</br>
<input type="checkbox" name="hobty"/>跳舞</br>
<input type="checkbox" name="hobty"/>羽毛球</br>
<input type="checkbox" name="hobty"/>网球</br>
<input type="checkbox" name="hobty"/>乒乓球</br>
<input type="button" onclick="selAll();" value="全选"/></br>
<script>
function selAll(){
var loves=document.getElementsByName("hobty");
for(var i=0;i<loves.length;i++){
loves[i].checked=true;
}
}
</script>
</body>
</html>

3.Node对象

父节点：parentNode

子节点：childNodes，firstNode，lastNode

同辈节点：nextSibling，previousSibling

4.操作dom树的方法

插入节点：

(1)appendChild()

(2)insertBefore(newNode,oldNode)

(3)insertAfter(newNode,oldNode)

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="u1">
<li>111</li>
<li>222</li>
</ul>
<br>
<input type="button" value="Add" onclick="add1();"/>
<script type="text/javascript">
function add1(){
var u1=document.getElementById("u1");
var l1=document.createElement("li");
var txt1=document.createTextNode("www");
l1.appendChild(txt1);
u1.appendChild(l1);
}
</script>
</body>
</html>

删除：

removeChild()

替换

replaceChild(newNode,oldNode)

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="select1" multiple="multiple" style="width:100px;height:200px;">
<option id="opt1" onclick="sel(id)">IT</option>
<option id="opt2" onclick="sel(id)">地理</option>
<option id="opt3" onclick="sel(id)">历史</option>
<option id="opt4" onclick="sel(id)">电影</option>
<option id="opt5" onclick="sel(id)">诗歌</option>
<option id="opt6" onclick="sel(id)">小说</option>
<option id="opt7" onclick="sel(id)">英语</option>
</select>
<select id="select2" multiple="multiple" style="width:100px;height:200px;">
</select>
<script type="text/javascript">
function sel(opname){
var sel1=document.getElementById("select1");
var op=document.getElementById(opname);
var sel2=document.getElementById("select2");
sel1.removeChild(op);
sel2.appendChild(op);
}
</script>
</body>

</html>

6.innerHtml属性

作用一：获取文本内容

作用二：设置内容，设置html代码

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="times">
</div>
<script type="text/javascript">
function time(){
var date=new Date();
var div1=document.getElementById("times");
div1.innerHTML=date.toLocaleString();
}
setInterval("time();",1000);
</script>
</body>
</html>

联动框案例

<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="provence" onchange="op(this.value);">
<option>--请选择--</option>
<option name="option" id="opt1" value="四川">四川</option>
<option name="option" id="opt2" value="湖南">湖南</option>
</select>
<select id="city">
</select>
</body>
<script type="text/javascript">
var arr=new Array(2);
arr[0]=["四川","成都","绵阳","攀枝花","南充"];
arr[1]=["湖南","长沙","株洲","湘潭","娄底"];
function op(val){
//先删除
var city=document.getElementById("city");
var cityopts=city.getElementsByTagName("option");
var t=cityopts.length;
//alert(cityopts.length);
for(var j=t-1;j>=0;j--){
city.removeChild(cityopts[j]);
}
//添加

for(var i=0;i<arr.length;i++){
var arr1=arr[i];
if(val==arr1[0]){
for(var j=1;j<arr1.length;j++){
var opt=document.createElement("option");
var optText=document.createTextNode(arr1[j]);
opt.appendChild(optText);
city.appendChild(opt);
}
}
}
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航