JavaScript—————DOM

来源：互联网发布：淘宝指数查询官网编辑：程序博客网时间：2024/05/22 05:05

可以使用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>

0 0