web 学习笔记5-DOM以及节点的操作

来源：互联网发布：综艺节目推荐知乎编辑：程序博客网时间：2024/05/16 12:16

1、Dom概述：

DOM：docuemnt object model 文档对象模型作用：重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目Core DOM :   定义了一套标准的针对任何结构化文档的对象 XML  DOM :   定义了一套标准的针对 XML 文档的对象 HTML DOM :   定义了一套标准的针对 HTML 文档的对象。xml：expensible markup language : 可扩展标记语言。例如一个简单的xml    <penson>        <name>张三</name>        <age>23</age>    </person>

2、结点的属性：

a. nodeName（节点名称）     元素节点的 nodeName 是标签名称     属性节点的 nodeName 是属性名称     文本节点的 nodeName 永远是 #text     文档节点的 nodeName 永远是 #document b. nodeValue（节点值）     对于文本节点，nodeValue 属性包含文本。    对于属性节点，nodeValue 属性包含属性值。    注意：nodeValue 属性对于文档节点和元素节点是不可用的。c. nodeType（节点类型）  : nodeType 属性可返回节点的类型。    标签节点的类型值是 1    属性节点的类型值是 2    文本节点的类型值是 3简单的例子：    <!doctype html>    <html lang="en">     <head>      <meta charset="UTF-8">      <meta name="Generator" content="EditPlus?">      <meta name="Author" content="">      <meta name="Keywords" content="">      <meta name="Description" content="">      <title>DOM节点的属性</title>     </head>     <body>        <p id = "p">hello</p>        <script type="text/javascript">        <!--            var p = document.getElementById("p") ;            alert(p.nodeName + " :" + p.nodeValue + ":" + p.nodeType) ;        //-->        </script>     </body>    </html>    运行的结果是：P:null:1 (因为p是一个元素节点，所以没有nodeValue)

3、结点的分类：

a、整个文档是一个文档节点 b、每个 XML 标签是一个元素节点 c、包含在 XML 元素中的文本是文本节点 d、每一个 XML 属性是一个属性节点 e、注释属于注释节点

4、结点的关系：

只有父子和兄弟关系parentNode  : 父节点childNodes  ：所有的子标签firstChild  ：第一个子节点lastChild 　：最后一个子节点nextSibling ：下一个兄弟节点previousSibling ：　上一个兄弟节点简单的例子：节点之间的导航<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>节点导航</title> </head> <body>    <table>    <tr>        <td>张三/td>        <td>男</td>        <td>50</td>    </tr>    <tr>        <td>李四</td>        <td>男</td>        <td>60</td>    </tr>    <tr>        <td>王五</td>        <td>男</td>        <td>20</td>    </tr>    </table>    <script type="text/javascript">        //示例： 拿到王五的年龄        //拿到根节点        var root = document.documentElement ;        //alert(root.nodeName) ;        //拿到body节点        var body = root.lastChild ;        //alert(body.nodeName) ;        //拿到table节点        var table = body.firstChild ;        //拿到tbody节点        var tbody = table.firstChild ;        //拿到成龙的年龄        var age = tbody.firstChild.nextSibling.lastChild.firstChild.nodeValue ;        alert(age);    </script> </body></html>

5、属性节点的操作：

<body>    <input type="text" name="name" id = "txt">    <script type="text/javascript">    <!--        //拿到文本框对象        var txt = document.getElementById("txt") ;        //拿到属性节点        var atts = txt.attributes ;        //拿到name属性的值        //alert(atts[1].nodeValue) ;        for(var i = 0 ;i<atts.length ;i++){            alert(atts[i].nodeName + ":" + atts[i].nodeValue) ;        }    //-->    </script></body>运行的结果：type:text name:name id:txt

6、拿取标签节点的方法：3种

getElementById() : 根据标签的ID拿到此标签节点getElementsByTagName() : 根据标签的名字拿到此标签节点数组getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。 <body>     <p name = "p">hello</p>     <input type="text" name="username"><br>     <input type="text" name="username"><br>     <input type="text" name="username"><br>     <script type="text/javascript">     <!--        //第一种方法：给节点设置id，采用document.getElementById()        //第二种方法        //document.getElementsByName: 只能用于表单对象        var p = document.getElementsByName("p") ;        alert(p.length) ;  //拿不到        var inputs = document.getElementsByName("username") ;        alert(inputs.length) ;        inputs[1].value = "你好" ;//在第二个输入框里面显示了你好        //第三种方式        var ps = document.getElementsByTagName("p") ;        alert(ps.length) ;//1        alert(ps[0].firstChild.nodeValue) ;//弹出hello提示，firstChild就是拿到了hello这个文本节点     //-->     </script> </body>

7、拿到文本节点内容的两种方法：

document.getElementById("h1")document.getElementsByTagName("h1")简单的示例；<body>    <h1 id = "h1">文本内容</h1>    <script type="text/javascript">    <!--        //示例： 拿到文本内容的文本        //第一种方法，亲测可以正常弹出        var h1 = document.getElementById("h1") ;        alert(h1.firstChild.nodeValue);        //第二种方式        var h1 = document.getElementsByTagName("h1") ;        alert(h1[0].innerHTML) ;        lert(h1[0].innerText) ;    //-->    </script></body>

8、标签节点的属性：（已有的知识）

主要是学习逻辑判断节点的类型，childNodes 的使用<body><ul>    <li id="bj" value="beijing">        北京        <h1>海淀</h1>        奥运    </li>    <li id="sh" value="shanghai">        上海    </li>    <br/>    <input type="button" value="li取值" onclick="getLi()"/></ul><script type="text/javascript"><!--    function getLi(){        //拿到北京节点        var li = document.getElementById("bj") ;        //拿到北京节点的所有儿子        var childs = li.childNodes ;        for(var i = 0 ; i<childs.length ;i++){            //alert(childs[i].nodeName + ":" + childs[i].nodeValue + ":" + childs[i].nodeType ) ;            if(childs[i].nodeType == 1){//判断是不是一个标签节点，如果是就取标签节点下的第一个子节点                alert(childs[i].firstChild.nodeValue) ;            }else{                alert(childs[i].nodeValue) ;//不是标签节点，可以看到就是文本节点了，直接就弹出文本的值            }        }    }//--></script></body>

9、获取下拉框文本的值：（已有的知识）

<body>    <select name="edu" id="edu">        <option value="本科">本科</option>        <option value="专科">专科</option>        <option value="高中">高中</option>        <option value="小学">小学</option>        <option value="幼儿园">幼儿园</option>    </select>    <script type="text/javascript">    <!--        var ops = document.getElementsByTagName("option") ;//获取所有的option标签节点        for(var  i =0 ; i<ops.length ;i++){            //alert(ops[i].text) ;//也可以正常弹出来            alert(ops[i].innerHTML) ;        }    //-->    </script></body>

以下是节点的增删改查，非常重要
10、替换节点：

replaceNode(): 替换节点(适用于IE)replaceChild() : 替换子节点简单的示例：<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus?">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>替换节点的操作</title> </head>    <script type="text/javascript">    <!--        //将北京替换为打麻将        function changeNode(){            //拿到北京节点            var bjNode = document.getElementById("bj");            //拿到打麻将对象            var gameNode = document.getElementById("game");            //替换            //bjNode.replaceNode(gameNode) ;            //bjNode.parentNode.replaceChild(gameNode,bjNode) ;            //克隆一份打麻将            var node = gameNode.cloneNode(true) ;            bjNode.parentNode.replaceChild(node,bjNode) ;//注意使用克隆的节点，如果直接使用gameNode的节点，则gameNode的节点就会消失        }    //-->    </script> <body>     <ul >        <li id="bj" onclick="changeNode()">北京</li>        <li>山东</li>    </ul>    <ul>        <li  id="game">打<p>麻将</p></li>        <li>斗地主</li>    </ul> </body></html>

11、添加节点：

创建节点：    document.createElement()  : 创建一个标签节点    docuemnt.createTextNode("内容") ：创建一个文本节点    节点的setAttribute() :添加属性节点添加结点：    appendChild() : 添加子节点示例：添加下拉框选项<script type="text/javascript"><!--    function addOptions(){        //创建一个新的节点        //第一种方式        var option = document.createElement("option") ;        option.value = "小学" ;//单独写这个，在浏览器中添加会出现空的，显示不了        option.text = "小学" ;//单独写这个，测试正常。所以俩个一起写        //拿到下拉框，加入小学        document.getElementsByTagName("select")[0].options.add(option) ;        //第二种方式，直接添加一个html代码        //获得select对象        var select = document.getElementsByTagName("select")[0] ;        select.innerHTML = select.innerHTML + "<option value = '小学'>小学</option>" ;        //第三种，使用appendChild        var option = document.createElement("option") ;        option.value = "小学" ;        option.text = "小学" ;        //获得select对象        var select = document.getElementsByTagName("select")[0] ;        select.appendChild(option);     }    function fun(){        //拿到div对象        var d = document.getElementById("d") ;        //创建一个img标签对象        var img = document.createElement("img") ;        //指定属性        img.src = "images/1.jpg" ;//前提是当前目录有这个图片        img.style.width = "200px" ;        img.height = "300" ;        //将图片添加到div标签中        d.appendChild(img) ;    }//--></script><body>    <input type="button" value="添加选项" onclick="addOptions()"/>    <input type="button" value="添加一副图片" onclick="fun()">    <select>        <option>本科</option>        <option>专科</option>        <option>高中</option>        <option>初中</option>    </select>    <div id = "d"></div></body>

12、删除结点：

removeChild() : 采用父节点删除子节点  例如：function delTr(btn){    var btnTd = document.createElement("td") ;    btnTd.innerHTML = "<button onclick = 'delTr(this)'>删除</button>" ;//这个this代表是这个按钮标签自己，    //删掉表格的行    //采用removeChild()    //父亲(tbody)干掉儿子(tr)    //拿到曾爷爷    var tbody = btn.parentNode.parentNode.parentNode ;    //拿到爷爷    var tr =  btn.parentNode.parentNode ;    //曾爷爷干掉爷爷    tbody.removeChild(tr);}一个全选和全不选的示例：<script type="text/javascript"><!--    function checkAll(flag){        //拿到所有的多选框        var hobbys = document.getElementsByName("hobby") ;        //循环赋值        for(var i =0 ;i<hobbys.length ;i++){            hobbys[i].checked = flag ;        }    }    function reverseCheck(){        //拿到所有的多选框        var hobbys = document.getElementsByName("hobby") ;        //循环赋值        for(var i =0 ;i<hobbys.length ;i++){            hobbys[i].checked = !hobbys[i].checked ;        }    }//--></script><body>    <h1>请选择你的爱好：</h1>    全选/全不选<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>    <input type="checkbox" name="hobby" value="football"/>足球    <input type="checkbox" name="hobby" value="basketball" />篮球    <input type="checkbox" name="hobby" value="swim" />游泳    <input type="checkbox" name="hobby" value="singing"/>唱歌<br/>    <input type="button" value="全选" onclick="checkAll(true)"/> <input type="button" value="全不选" onclick="checkAll(false)"/>    <input type="button" value="反选" onclick="reverseCheck()"/> </body></body>

简单的总结：
在javascript中想调用html代码：只能通过属性innerHTML
在javascript中想调用CSS代码：只能通过属性clasName可以调用样式表
.style.属性

0 0