day03_js学习笔记_03_js的事件、js的BOM、js的DOM

简介: day03_js学习笔记_03_js的事件、js的BOM、js的DOM================================================================================================================...

day03_js学习笔记_03_js的事件、js的BOM、js的DOM

=============================================================================
=============================================================================
涉及到的知识点有:
    五、js的事件
        1、js的常用事件
            onclick        点击事件
            onchange       用户改变域的内容事件
            onfoucus       获得焦点事件
            onmouseover    鼠标悬浮事件
            onmouseout     鼠标离开事件
            onblur         失去焦点事件
            onload         加载完毕的事件
        2、事件的绑定方式(也可以叫事件的注册)
            (1) 将事件和响应行为都内嵌到html标签中。(学习演示时用的多)
            (2) 将事件内嵌到html中,而响应行为用函数进行封装。(开发中用的多)
            (3) 将事件和响应行为,与html标签完全分离。(开发中用的多)        
        3、阻止事件的默认行为
        4、阻止事件的传播(相当于阻止事件冒泡)
    六、js的BOM
        (1) Window对象(窗口对象)
            弹框的方法
            open方法(打开网页的方法)
            定时器方法
        (2) Location对象(跳转位置对象)
        (3) History对象(历史对象)
    七、js的DOM
        1、理解文档对象模型
        2、dom方法和属性
            (1) 通过元素的id属性获得元素节点对象
            (2) 通过元素的name属性获得元素节点对象的集合
            (3) 通过标签名称获得元素节点对象的集合
            (4) 查看元素节点是否含有子节点
            (5) 获得节点名称类型和值
                Node节点对象练习1:
                Node节点对象练习2:
            (6) 通过父节点替换子节点
            (7) 获取属性节点的值
            (8) 设置属性值(同上)
            (9) 创建节点(同上)
            (10) 将元素插入到元素前面
            (11) 将新节点插入到某节点的后面(同上)
            (12) 删除节点
            (13) innerHTML属性
=============================================================================
=============================================================================
day03_js学习笔记_03_js的事件、js的BOM、js的DOM
-----------------------------------------------------------------------------
一、js的简介 
二、js的基本语法
三、js的内建对象
四、js的函数(相当于java中的方法)
-----------------------------------------------------------------------------
五、js的事件
    事件通常与函数配合使用,这样我们可以通过发生的事件来驱动函数执行。
        事件(动作/行为)
        事件源(动作/行为的承受者)
        响应行为
--------------------------------------
    1、js的常用事件
        onclick     点击事件
        onchange    用户改变域的内容事件
        需求:实现二级联动
            <select id="city">
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="sh">上海</option>
            </select>
            <select id="area">
                <option>海淀</option>
                <option>朝阳</option>
                <option>东城</option>
            </select>
            
            <script type="text/javascript">
                var select = document.getElementById("city");
                select.onchange = function() {
                    var optionVal = select.value;
                    switch (optionVal) {
                    case 'bj':
                        var area = document.getElementById("area");
                        area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                        break;
                    case 'tj':
                        var area = document.getElementById("area");
                        area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                        break;
                    case 'sh':
                        var area = document.getElementById("area");
                        area.innerHTML = "<option>浦东</option><option>杨浦</option>";
                        break;
                    default:
                        alert("error");
                    }
                };
--------------------------------------
        onfoucus    获得焦点事件
        onblur      失去焦点事件
        需求:当输入框获得焦点的时候,提示输入的内容格式。
             当输入框失去焦点的时候,提示输入有误。
            <!-- 使用 label "for" 属性绑定到 input "id"属性上 -->
            <label for="txt">name</label>
            <input id="txt" type="text" /><span id="action"></span>

            <script type="text/javascript">
                var txt = document.getElementById("txt");
                txt.onfocus = function() {
                    // 获得焦点后:友好提示
                    var span = document.getElementById("action");
                    span.innerHTML = "用户名格式最小8位";
                    span.style.color = "green";
                };
                txt.onblur = function() {
                    // 失去焦点后:错误提示
                    var span = document.getElementById("action");
                    span.innerHTML = "对不起 格式不正确";
                    span.style.color = "red";
                };
            </script>
--------------------------------------
        onmouseover   鼠标悬浮事件
        onmouseout    鼠标离开事件
        需求:div元素 鼠标移入变为绿色 移出恢复原色
            <head>        
            <style type="text/css">
                #d1 {
                    background-color: red;
                    width: 200px;
                    height: 200px;
                }
            </style>
            </head>
            <body>
                <div id="d1"></div>
            </body>
            <script type="text/javascript">
                var div = document.getElementById("d1");
                div.onmouseover = function() {
                    this.style.backgroundColor = "green";
                };
                div.onmouseout = function() {
                    this.style.backgroundColor = "red";
                };
            </script>
--------------------------------------
        onload    加载完毕的事件
            等到页面加载完毕后再执行onload事件所指向的函数。
            <head>
            <script type="text/javascript">
                window.onload = function() {
                    var span = document.getElementById("span");
                    // alert(span); // [object HTMLSpanElemennt]
                    span.innerHTML = "hello js";
                };
            </script>
            </head>
            <body>
                <span id="span"></span>
            </body>
-----------------------------------------------------------------------------
    2、事件的绑定方式(也可以叫事件的注册)
        (1) 将事件和响应行为都内嵌到html标签中。(学习演示时用的多)
            <input type="button" value="button" onclick="alert('xxx')" />
            
        (2) 将事件内嵌到html中,而响应行为用函数进行封装。(开发中用的多)
            <input type="button" value="button" onclick="fn()" />
            
            <script type="text/javascript">
                function fn() { // 有名函数
                    alert("yyy");
                }
            </script>
            
        (3) 将事件和响应行为,与html标签完全分离。(开发中用的多)
            <input id="btn" type="button" value="button" />
            
            <script type="text/javascript">
                var btn = document.getElementById("btn"); // 先找到这个节点对象
                btn.onclick = function() { // 匿名函数
                    alert("zzz");
                }; 
            </script>
            
        注意:
            this关键字
            this经过事件的函数进行传递的是html标签对象,通过该对象可以获取html标签任意的属性。
            <input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)" />
            <script type="text/javascript">
                function fn(obj) {
                    alert(obj.name);
                }
            </script>
-----------------------------------------------------------------------------
    3、阻止事件的默认行为
        法一:
            W3c标准:传递过来的事件对象.preventDefault();
            IE标准:使用window.event.returnValue = false;
            <body>
                <a href="demo11.html" onclick="fn(event)">点击我吧</a>
            </body>

            <script type="text/javascript">
                function fn(e) {    
                    // W3c标准
                    if (e && e.preventDefault) {
                        alert("W3c");
                        e.preventDefault();
                    // IE标准
                    } else {
                        alert("IE");
                        window.event.returnValue = false;
                    }
                }
            </script>
            
        法二:
            通过事件返回false也可以阻止事件的默认行为
            <a href="demo11.html" onclick="return false">点击我吧</a>
        
        法三:
            <a href="javascript:void(0)">点击我吧</a>
-----------------------------------------------------------------------------
    4、阻止事件的传播(相当于阻止事件冒泡)
        W3c标准: 传递过来的事件对象.stopPropagation();
        IE标准: window.event.cancelBubble = true;
            <body>
                <div onclick="fn1()" style="width: 100px; height: 100px; background-color: green; padding: 50px;">
                    <div onclick="fn2(event)" style="width: 100px; height: 100px; background-color: red;">
                        xxxx
                    </div>
                </div>
            </body>

            <script type="text/javascript">
                function fn1() {
                    alert("fn1");
                }
                function fn2(e) {
                    alert("fn2");
                    
                    // W3c标准: 传递过来的事件对象.stopPropagation();
                    // IE标准: window.event.cancelBubble = true;
                    
                    // W3c标准
                    if (e && e.stopPropagation) {
                        alert("W3c");
                        e.stopPropagation();
                    // IE标准
                    } else {
                        alert("IE");
                        window.event.cancelBubble = true;
                    }
                }
            </script>
-----------------------------------------------------------------------------
六、js的BOM
    (1) Window对象(窗口对象)
            window.alert();
        弹框的方法:
            提示框:
                alert("提示信息");
                没有返回值。
                var res = alert("xxx");
                alert(res); 
            确认框:
                confirm("确认信息");
                有返回值:如果点击确认,返回true。如果点击取消,返回false。
                var res = confirm("您确认要删除吗?");
                alert(res);
            输入框:
                prompt("提示信息");
                有返回值:如果点击确认,返回输入框的文本。如果点击取消,返回null。
                var res =  prompt("请输入密码");
                alert(res);
--------------------------------------
        open方法(打开网页的方法):
            window.open("url地址");            
            window.open("../js的内建对象/demo04.html");
--------------------------------------
        定时器方法:
            1、setTimeout(函数, 毫秒值); // 在过多少毫秒值后去执行某函数,只执行一次
                setTimeout(
                    function() {
                        alert("xxx");
                    },
                    3000
                );
                
            2、clearTimeout(定时器的名称); // 清除定时器
                <head>
                <script type="text/javascript">
                    var timer;
                    var fn = function() {
                        alert("x");
                        timer = setTimeout(fn, 2000); // 要想实现多次执行,需要用到递归,但是不好,有安全风险(递归可能会导致内存泄漏)
                    };
                    var closer = function() {
                        clearTimeout(timer);
                    };
                    fn();
                </script>
                </head>
                <body>
                    <input type="button" value="button" onclick="closer()">
                </body>
                
            3、setInterval(函数, 毫秒值); // 在间隔多少毫秒值后去执行某函数,一直执行(多次执行) 
               clearInterval(定时器的名称); // 清除定时器
               (js开发中常用以上这两个函数)
                <head>
                <script type="text/javascript">
                    var timer = setInterval(
                        function() {
                            alert("hello");
                        },
                        2000
                    );
                    var closer = function() {
                        clearInterval(timer);
                    };    
                </script>
                </head>
                <body>
                    <input type="button" value="button" onclick="closer()">
                </body>
                
            需求:
                注册5秒钟后跳转首页。
                <head>
                <script type="text/javascript">
                    var time = 5;
                    var timer;
                    timer = setInterval(
                        function() {
                            var second = document.getElementById("second"); // 先得到span对象
                            if (time >= 1) {
                                second.innerHTML = time;
                                time--;
                            } else {
                                clearInterval(timer);
                                location.href = "../js的内建对象/demo01.html";
                            }
                        },
                        1000
                    );
                </script>
                </head>
                <body>
                    恭喜您注册成功!
                    <span id="second" style="color: red;">5</span>秒后跳转到首页,如果不跳转请
                    <a href="../js的内建对象/demo01.html">点击这里</a>
                </body>
--------------------------------------
    (2) Location对象(跳转位置对象)
        location.href = "url地址";
--------------------------------------
    (3) History对象(历史对象)
        back()      加载 history 列表中的前一个 URL
        forward()   加载 history 列表中的下一个 URL
        go()        加载 history 列表中的某个具体页面
        
        方式一:
        demo05.html
            <a href="demo6.html">后一页</a>
        demo06.html
            <a href="demo7.html">后一页</a>
            <input type="button" value="上一页" onclick="history.back()">
            <input type="button" value="下一页" onclick="history.forward()">
        demo07.html
            第七页
        
        方式二:
        demo05.html
            <a href="demo6.html">后一页</a>
        demo06.html
            <a href="demo7.html">后一页</a>
            <input type="button" value="上一页" onclick="history.go(-1)">
            <input type="button" value="下一页" onclick="history.go(1)">
        demo07.html
            第七页            
-----------------------------------------------------------------------------
七、js的DOM
    1、理解文档对象模型
        html文件加载到内存之后会形成一棵dom树,根据这些节点对象可以进行脚本代码的动态修改。
        在dom树当中,一切皆为节点对象。
    2、dom方法和属性
--------------------------------------    
    (1) 通过元素的id属性获得元素节点对象
        <body>
           <form name="form1" action="test.html" method="post" >
              <input type="text" name="username" value="IT精英培训" id="tid" onchange="" />
              <input type="button" name="ok" value="保存1" />
           </form>
        </body>

        <script type="text/javascript">
        
            // 输出 <input type="text" name="username" value="IT精英培训" id="tid" >标签value属性的值
            var inputNode = document.getElementById("tid");
            alert(inputNode.value); // IT精英培训

            // 输出 <input type="text" name="username" value="IT精英培训" id="tid" >标签type属性的值
            var inputNode = document.getElementById("tid");
            alert(inputNode.type); // text
            
        </script>
--------------------------------------
    (2) 通过元素的name属性获得元素节点对象的集合
        <body>
            <form name="form1" action="test.html" method="post">
                <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
                <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
                <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
                <input type="button" name="ok" value="保存1" />
            </form>
        </body>

        <script type="text/javascript">
        
            // 通过元素的name属性获取所有元素的引用
            var inputNodes = document.getElementsByName("tname");
            
            // 测试该数据的长度
            alert(inputNodes.length); // 3
            
            // 遍历元素,输出所有value属性的值
            for (var i = 0; i < inputNodes.length; i++) {
                var inputNode = inputNodes[i];
                alert(inputNode.value);
            }
            
            // 为每个文本框(<input type="text">)增加onchange事件,当值改变时,输出改变的值
            for (var i = 0; i < inputNodes.length; i++) {
                var inputNode = inputNodes[i];
                inputNode.onchange = function() {
                    alert(this.value);
                
                };
            }
            
        </script>
--------------------------------------
    (3) 通过标签名称获得元素节点对象的集合
        <body>
            <form name="form1" action="test.html" method="post">
                <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
                <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
                <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
                <input type="button" name="ok" value="保存1" />
            </form>

            <select name="edu" id="edu">
                <option value="博士">博士^^^^^</option>
                <option value="硕士" selected="selected">硕士^^^^^</option>
                <option value="本科">本科^^^^^</option>
                <option value="幼儿园">幼儿园^^^^^</option>
            </select>

            <select name="job" id="job">
                <option value="美容">美容^^^^^</option>
                <option value="IT">IT^^^^^</option>
                <option value="程序员">程序员^^^^^</option>
                <option value="建筑师">建筑师^^^^^</option>
            </select>

            <br />
            <input id="btn" type="button" value="输出select被选中的值" />
        </body>

        <script type="text/javascript">
            
            // 获取所有的input元素,返回值是数组
            var inputNodes = document.getElementsByTagName("input");
            
            // 测试长度
            alert(inputNodes.length); // 4
            
            // 遍历所有value的值
            for (var i = 0; i < inputNodes.length; i++) {
                var inputNode = inputNodes[i];
                alert(inputNode.value);
            }
            
            // 输出type="text"中 value属性的值 ,不包含按钮(button)
            for (var i = 0; i < inputNodes.length; i++) {
                var inputNode = inputNodes[i];
                if (inputNode.type == "text") {
                    alert(inputNode.value);
                }
            }
            
            // 输出所有下拉选项select的option标签中value的值
            var optionNodes = document.getElementsByTagName("option");
            for (var i = 0; i < optionNodes.length; i++) {
                var optionNode = optionNodes[i];
                alert(optionNode.value);
            }
            
            // 输出所有下拉选项 id="edu"中option标签中 value属性的值
            var edu = document.getElementById("edu");
            var optionNodes = edu.getElementsByTagName("option");
            for (var i = 0; i < optionNodes.length; i++) {
                var optionNode = optionNodes[i];
                alert(optionNode.value);
            }
            
            // 点击按钮输出下拉选项中被选中的值
            var btn = document.getElementById("btn");
            btn.onclick = function() {
                var optionNodes = document.getElementsByTagName("option");
                for (var i = 0; i < optionNodes.length; i++) {
                    var optionNode = optionNodes[i];
                    if (optionNode.selected) {
                        alert(optionNode.value);
                    }
                }
            };
            
        </script>
--------------------------------------
    (4) 查看元素节点是否含有子节点
        <body>
            <form name="form1" action="test.html" method="post">
                <input type="text" name="tname" value="IT精英培训_1" id="tid_1" /><br>
                <input type="text" name="tname" value="IT精英培训_2" id="tid_2" /><br>
                <input type="text" name="tname" value="IT精英培训_3" id="tid_3" /><br>
                <input type="button" name="ok" value="保存1" />
            </form>

            <select name="edu" id="edu">
                <option value="博士">博士^^^^^</option>
                <option value="硕士">硕士^^^^^</option>
                <option value="本科" selected="selected">本科^^^^^</option>
                <option value="幼儿园">幼儿园^^^^^</option>
            </select>

            <select name="job" id="job">
                <option value="美容">美容^^^^^</option>
                <option value="IT">IT^^^^^</option>
                <option value="程序员">程序员^^^^^</option>
                <option value="建筑师">建筑师^^^^^</option>
            </select>
        </body>

        <script type="text/javascript">
          
           // 查看id="edu"的节点是否含有子节点
           var edu = document.getElementById("edu");
           alert(edu.hasChildNodes()); // true

           // 查看id="tid_1"的节点是否含有子节点
           var tid_1 = document.getElementById("tid_1");
           alert(tid_1.hasChildNodes()); // false
           
        </script>
--------------------------------------
    (5) 获得节点名称类型和值
        <body>
            <form name="form1" action="test.html" method="post">
                <input type="text" name="tname" value="IT精英培训_1" id="tid_1"><br>
                <input type="text" name="tname" value="IT精英培训_2" id="tid_2"><br>
                <input type="text" name="tname" value="IT精英培训_3" id="tid_3"><br>
                <input type="button" name="ok" value="保存1" />
            </form>
            <p id="pid">明天上课</p>
        </body>

        <script type="text/javascript">
          
            // <input type="text" name="tname" value="IT精英培训_1" d="tid_1" ><br>
            // 元素节点 :id="tid_1",输出nodeName(只读)    nodeType(只读)     nodeValue(可读可写)
            var node = document.getElementById("tid_1");
            alert(node.nodeName); // input    元素节点返回元素名称,属性节点返回属性名称,文本节点返回内容为#text的字符串
            alert(node.nodeType); // 1        元素节点返回1,属性节点返回2,文本节点返回3
            alert(node.nodeValue); // null    元素节点返回null,属性节点返回属性的值,文本节点返回文本节点的内容

            // <p id="pid">明天上课</p>
            // 属性节点 :id="pid",输出nodeName nodeType nodeValue
            var node = document.getElementById("pid");
            var p = node.getAttributeNode("id");
            alert(p.nodeName); // id
            alert(p.nodeType); // 2
            alert(p.nodeValue); // pid
            
            // <p id="pid">明天上课</p>
            // 文本节点 :id="pid",输出nodeName nodeType nodeValue
            var node = document.getElementById("pid");
            var textNode = node.firstChild;
            alert(textNode.nodeName); // #text
            alert(textNode.nodeType); // 3
            alert(textNode.nodeValue); // 明天上课
            
        </script>
-----------------------------------------------------------------------------
    Node节点对象练习1:
        <body>
            <h1 id="h1">明天休息</h1>
        </body>

        <script type="text/javascript">
          
            // <h1 id="h1">明天休息</h1>
            // 方法一: 利用firstChild/lastChild 输出明天休息
            var h1 = document.getElementById("h1");
            var textNode = h1.firstChild; // 因为只有一个孩子,lastChild也可以
            alert(textNode.nodeName); // #text
            alert(textNode.nodeType); // 3
            alert(textNode.nodeValue); // 明天休息
            
            // 测试nodeValue是一个读写属性
            alert(textNode.nodeValue); // 明天休息
            alert(textNode.nodeValue = "明天继续上课"); // 明天继续上课
            
            // 方法二:childNodes表示父元素下的所有的子元素(数组/集合)
            var h2 = document.getElementById("h1");
            var childs = h2.childNodes;
            alert(childs[0].nodeValue); // 明天休息

         </script>
--------------------------------------
    Node节点对象练习2:
        <body>
            <ul>
                <li id="bj" value="beijing">北京<p>海淀</p>奥运</li>
                <li id="sh" value="shanghai">上海</li>
            </ul>
        </body>

        <script type="text/javascript">
            
            // 打印出 id="bj"该节点的所有子节点的(nodeName, nodeType, nodeValue)
            var node = document.getElementById("bj");
            var subNodes = node.childNodes;
            for (var i = 0; i < subNodes.length; i++ ) {
                var subNode = subNodes[i];
                alert(subNode.nodeName);
                alert(subNode.nodeType);
                alert(subNode.nodeValue);
            }
            
            // 同时打印文本值  北京 海淀  奥运 
            for (var i = 0; i < subNodes.length; i++ ) {
                var subNode = subNodes[i];
                if (subNode.nodeType == "3") {
                    alert(subNode.nodeValue);
                }
                if (subNode.nodeType == "1") {
                    var textNode = subNode.firstChild; 
                    alert(textNode.nodeValue);
                }
            }
              
        </script>        
--------------------------------------        
    (6) 通过父节点替换子节点
        <body>
            您喜欢的城市:
            <br>
            <ul>
                <li id="bj" value="beijing">北京</li>
                <li id="sh" value="shanghai">上海</li>
                <li id="cq" value="chongqing">重庆</li>
            </ul>
            您喜欢的游戏:
            <br>
            <ul>
                <li id="fk" value="fangkong">反恐
                    <p>精英</p>
                </li>
                <li id="ms" value="moshou">魔兽</li>
                <li id="cq" value="chuanqi">传奇</li>
            </ul>
        </body>

        <script type="text/javascript">
          
             // 点击北京节点, 将被反恐节点替换
            var bj = document.getElementById("bj"); // 旧节点对象
            var fk = document.getElementById("fk"); // 新节点对象
            bj.onclick = function() {
                var parentNode = this.parentNode;
                parentNode.replaceChild(fk, this); // 通过父节点对象才能来替换
            };
            
        </script>
--------------------------------------
    (7) 获取属性节点的值
        <body>
            您喜欢的城市:
            <br>
            <ul>
                <li id="bj" value="beijing">北京</li>
                <li id="sh" value="shanghai">上海</li>
                <li id="cq" value="chongqing">重庆</li>
            </ul>
            您喜欢的游戏:
            <br>
            <ul>
                <li id="fk" value="fangkong">反恐</li>
                <li id="ms" value="moshou">魔兽</li>
                <li id="xj" value="xingji">星际争霸</li>
            </ul>
        </body>

        <script type="text/javascript">
          
              // 获取  <li id="xj" value="xingji">星际争霸</li> 节点的value属性的值
              var xj = document.getElementById("xj");
              alert(xj.getAttribute("value")); // xingji
              
        </script>
--------------------------------------
    (8) 设置属性值(同上)
        <script type="text/javascript">
          
            // 给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
            var xj = document.getElementById("xj");
            xj.setAttribute("name", "xingjizhengba");
            // 测试
            alert(xj.getAttribute("name"));
              
        </script>
--------------------------------------
    (9) 创建节点(同上)
        <script type="text/javascript">
          
            // 增加城市节点 <li id="tj" value="tianjin">天津</li>放置到city下
            var li = document.createElement("li"); // 创建新儿子标签对象(元素对象)
            // 添加属性
            li.setAttribute("id", "tj");
            li.setAttribute("value", "tianjin");
            // 添加文本
            var txt = document.createTextNode("天津"); // 创建文本对象
            li.appendChild(txt); // 把文本对象添加到标签对象的内部
            // 把标签对象添加到ul对象中
            var ul = document.getElementById("city");
            ul.appendChild(li); // 用爸爸ul对象把新儿子标签对象添加进来
             
        </script>
--------------------------------------
    (10) 将元素插入到元素前面
        <body>
            <ul>
                <li id="bj" name="beijing">北京</li>
                <li id="sh" name="shanghai">上海</li>
                <li id="cq" name="chongqing">重庆</li>
            </ul>
        </body>

        <script type="text/javascript">
          
            // 创建新的节点 <li id="tj" name="tianjin">天津</li>
            var li = document.createElement("li");
            li.setAttribute("id", "tj");
            li.setAttribute("name", "tianjin");
            var txt = document.createTextNode("天津");
            li.appendChild(txt);
            // 在 <li id="cq" name="chongqing">重庆</li>的前面
            var ul = document.getElementsByTagName("ul");
            var cq = document.getElementById("cq");
            ul[0].insertBefore(li, cq);
            
        </script>
--------------------------------------
    (11) 将新节点插入到某节点的后面(同上)    
        <script type="text/javascript">
            
            // 在 上海节点的后面 插入天津节点<li id="tj" name="tianjin">天津</li>
            var li = document.createElement("li");
            li.setAttribute("id", "tj");
            li.setAttribute("name", "tianjin");

            var txt = document.createTextNode("天津");
            li.appendChild(txt);

            var ul = document.getElementsByTagName("ul");
            var sh = document.getElementById("sh");
            var cq = sh.nextSibling; // 通过上海节点找到重庆节点(即下一个兄弟)

            ul[0].insertBefore(li,cq);
            
        </script>
--------------------------------------
    (12) 删除节点
        <body>
            <ul id="city">
                <li id="bj" name="beijing">北京</li>
                <li id="sh" name="shanghai">上海</li>
                <li id="cq" name="chongqing">重庆</li>
            </ul>
        </body>

        <script type="text/javascript">
          
            // 删除<ul id="city"> 下 <li id="bj" name="beijing">北京</li>这个节点</ul>
            var city = document.getElementById("city"); // 先获取爸爸节点对象
            var bj = document.getElementById("bj");     // 再获取儿子节点对象
            city.removeChild(bj); // 用爸爸干掉儿子
             
        </script>
--------------------------------------
    (13) innerHTML属性
        <body>
            <div id="subject">jquery</div>
        </body>
        
        <script type="text/javascript">

            // 使用innerHTML读出id="subject"中的文本内容
            var div = document.getElementById("subject");
            // 原先的做法
            // var textNode = div.firstChild; 
            // alert(textNode.nodeValue);
            // 现在的做法
            alert(div.innerHTML);

            // 将<h1>今天</h1>写到div的层中
            var div = document.getElementById("subject");
            div.innerHTML = "<h1>今天</h1>";
            
        </script>
=============================================================================    

 

我的GitHub地址: https://github.com/heizemingjun
我的博客园地址: http://www.cnblogs.com/chenmingjun
我的蚂蚁笔记博客地址: http://blog.leanote.com/chenmingjun
Copyright ©2018 黑泽明军
【转载文章务必保留出处和署名,谢谢!】
相关文章
|
10天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改
|
9天前
|
JavaScript 前端开发 安全
【JavaScript 】DOM操作快速入门
【JavaScript 】DOM操作快速入门
12 2
|
4天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
10 0
|
29天前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
17 2
|
29天前
|
JavaScript Java
JavaSE精选-JS&DOM
JavaSE精选-JS&DOM
20 1
|
24天前
|
XML JavaScript 前端开发
web学习笔记(二十二)DOM开始
web学习笔记(二十二)DOM开始
15 0
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
30天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
31 1
|
1月前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
21 2
|
1月前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。