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

最新推荐文章于 2021-01-08 18:44:03 发布

pin-csdn

最新推荐文章于 2021-01-08 18:44:03 发布

阅读量514

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/gaopinqiang/article/details/71436660

版权

Web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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.属性

pin-csdn

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web 学习笔记5-DOM以及节点的操作

1、Dom概述：2、结点的属性：3、结点的分类：4、结点的关系：5、属性节点的操作：6、拿取标签节点的方法：3种7、拿到文本节点内容的两种方法：8、标签节点的属性：（已有的知识）9、获取下拉框文本的值：（已有的知识）10、替换节点：11、添加节点：12、删除结点：
复制链接

扫一扫

专栏目录