JavaScript笔记03

1.案例一:在末尾添加节点
    第一步:获取到ul标签
    第二部:获取到li标签
        document.createElement("标签名称")方法
    第三步: 创建文本
        document.createTextNode("文本内容")
    第四步:把文本添加到li下面
        使用appendChild()方法
    第五步:把li添加到ul末尾
        使用appendChild()方法

2.元素对象(element对象)
    要操作element对象,首先必须要获取到element,
        使用document里面相应的方法获取
    方法:
        获取属性里面的值
            getAttribute("属性名称"var input1 = document.getElementById("inputid");
                    //alert(input1.value);
                    alert(input1.getAttribute("value"));
        设置属性的值
            input1.setAttribute("class","haha");
        删除属性
            input1.removeAttribute("name");
            不能删除value
    想要获取标签下面的子标签
        使用属性 childNodes,但是这个属性兼容性很差,一般不使用
        获得标签下面子标签的唯一有效办法:getElementsByTagName
                var ul11 = document.getElementById("ulid1");
                //获取ul下面的子标签
                // var lis=ul11.childNodes;
                // alert(lis.length);
                var lis=ulid1.getElementsByTagName("li");
                alert(lis.length);

3.Node对象的属性一
    nodeName
    nodeType
    nodeValue
    使用dom解释html的时候,需要html 里面的标签、属性、文本都封装成对象。他们各自对应上面三种对象都有不同的值。

    标签节点对应的值
        nodeType : 1
        nodeName : 大写的标签名称
        nodeValue : null
    属性节点对应的值
        nodeType : 2
        nodeName : 属性的名称
        nodeValue : 属性的值
    文本节点对应的值
        nodeType : 3
        nodeName : #text
        nodeValue : 文本内容

4.Node对象的属性二
        <ul>
            <li>CCBZ</li>
            <li>CBZZ</li>

        </ul>
    父节点
        ul是li的父节点
        parentNode
    子节点
        li是ul的子节点
        childNodes 得到所有的子节点,但是兼容性很差
        firstChild 第一个子节点
                    var ul1 = document.getElementById("ulid");
                    var li1 = ul1.firstChild;
                    alert(li1.id);
        lastChild  最后一个子节点
                    var ul1 = document.getElementById("ulid");
                    var li1 = ul1.lastChild;
                    alert(li1.id);
    同辈节点
        li直接关系是同辈节点
        nextSibling : 返回给定节点的下一个兄弟节点
                    var li3=document.getElementById("li3");
                    alert(li3.nextSibling.id);
        previousSibling : 返回给定节点的上一个兄弟节点
                    var li3=document.getElementById("li3");
                    alert(li3.previousSibling.id);

5.操作dom树
    appendChild
        -添加子节点到末尾
        -特点:类似于剪切粘贴的效果
    insertBefore(newNode,oldNode)方法
        -在某个节点之前插入一个新的节点
        -两个参数
            要插入的节点
            在谁之前插入
        -插入一个节点,节点不存在,创建:
            1.创建标签
            2.创建文本
            3.把文本添加到标签下面上
                <ul id="ul21">
                    <li id="li11">CCCC</li>
                    <li id="li22">VVVV</li>
                    <li id="li33">ZZZZ</li>
                </ul>
                <input type="button" value="insert" onclick="insert1();">
                <script type="text/javascript">
                    //在<li>VVVV</li>之前添加BBBB
                    function insert1() {
                        var li22 = document.getElementById("li22");
                        var li44 = document.createElement("li");
                        var text44 = document.createTextNode("BBBBB");
                        li44.appendChild(text44);
                        var ulid21 = document.getElementById("ul21");
                        ulid21.insertBefore(li44,li22);
                    }
                </script>

    removeChild()方法:删除节点
        -通过父节点删除,不能自己删除自己
                <ul id="ul21">
                    <li id="li11">CCCC</li>
                    <li id="li44">BBBB</li>
                    <li id="li22">VVVV</li>
                    <li id="li33">ZZZZ</li>
                </ul>
                <input type="button" value="remove" onclick="remove1();">
                <script type="text/javascript">
                    function remove1() {
                        var ul21 = document.getElementById("ul21");
                        var li22 = document.getElementById("li22");
                        ul21.removeChild(li22);
                    }
                </script>
    replaceChild(newNode,oldNode)替换节点
                <ul id="ul21">
                    <li id="li11">CCCC</li>
                    <li id="li44">BBBB</li>
                    <li id="li22">VVVV</li>
                    <li id="li33">ZZZZ</li>
                </ul>
                <input type="button" value="replace" onclick="replace();">
                <script type="text/javascript">
                    function replace() {
                        var ul = document.getElementById("ul21");
                        var newli = document.createElement("li");
                        var newvalue = document.createTextNode("Zcbz");
                        newli.appendChild(newvalue);
                        var oldli = document.getElementById("li22");
                        ul.replaceChild(newli,oldli);
                    }
                </script>
    cloneNode(boolean):复制节点
                <ul id="ul21">
                    <li id="li11">CCCC</li>
                    <li id="li22">BBBB</li>
                    <li id="li33">ZZZZ</li>
                </ul>
                <div id="divid">

                </div>
                <input type="button" value="copy" onclick="copy();">
                <script type="text/javascript">
                    function copy() {
                        var ul = document.getElementById("ul21");
                        var ul2 = ul.cloneNode(1);
                        var div = document.getElementById("divid");
                        div.appendChild(ul2);
                    }
                </script>
6.innerHTML属性
    这个属性不是dom的组成部分,但是大多数浏览器都支持
    第一个作用:获取文本的内容
        <span id="sid">cbzcbz</span>
        <script type="text/javascript">
            var span1 = document.getElementById("sid");
            alert(span1.innerHTML);
        </script>
    第二个作用:向标签里面设置内容(可以是html代码)
        <span id="sid">cbzcbz</span>
        <div id="divid"></div>
        <script type="text/javascript">
            var span2=document.getElementById("sid");
            var div2=document.getElementById("divid");
            div2.innerHTML = "<hi>CBZCBZ</hi>";
        </script>
7.动态显示时间
    得到当前时间
        var date = new Date();
        var d1 = date.toLocaleString();
    需要让页面每一秒获取时间
        setInterval方法 定时器
    显示到页面上
        每一秒向div里面写一次时间
            使用innerHYML属性
                <div id="times"></div>
                <script type="text/javascript">
                    function getD1() {
                        var date = new Date();
                        var d1 = date.toLocaleString();
                        var div1 = document.getElementById("times");
                        div1.innerHTML=d1;
                    }
                    //实现定时器每一秒输入一次当前时间
                    setInterval("getD1()",1000)
                </script>

8.案例三:全选案例
    创建一个页面
        复选框
            -四个复选框表示爱好
            -还有一个复选框,全选和全不选,也有一个事件
        三个按钮,分别有事件
            -全选
            -全不选
            -反选
        操作:
            1.先获取到需要操作的复选框  -使用getElementByName()
            2.返回是数组  -属性 checked判断复选框是否选中
              -checked = true表示选中
              -遍历数组,得到每一个checkbox
                把每一个checkbox属性checked=true

9.案例四:下拉列表左右选择
    下拉选择框
    创建一个页面
        两个下拉选择框
            设置multiple属性
        四个按钮,有事件
        function selToRight()
                    /*
                    * 1.获取select1里面的option
                    *   -getElementByTagName()返回的是数组
                    *   -遍历数组,得到option
                    * 2.判断option是否被选中
                    *   -属性 selected=true 选中;=false 没有选中
                    * 3.如果是选中,把选择的添加到右边去
                    * 4.得到select2,添加选择的部分  appendChild 方法
                    * */
        function allToRight()
                    /*
                      1.获取第一个select下面的option对象
                      2.返回数组,遍历数组
                      3.得到每一个option对象
                      4.得到select2
                      5.option添加到select2下 --appendChild方法
                     */

10.案例五:省市联动
    **创建一个页面,有两个下拉选择框
            在第一个下拉框里面有一个改变事件: onchange事件
11.案例六:动态生成表格
    创建一个页面,两个输入框和一个按钮
            行:<input type="text" id="h" />:<input type="text" id="l" />
            <br/>
            <input type="button" value="生成" onclick="add2();"/>
            <div id="divid">

            </div>
            <script type="text/javascript">
                function add2() {
                    /*
                        1.得到输入的行和列
                        2.生成表格
                            --循环行
                            --在行里循环单元格
                        3.把表格的代码设置到div里面(innerHTML),显示到页面上。
                    */
                    var h = document.getElementById("h").value;
                    var l = document.getElementById("l").value;
                    //把表格代码放到一个变量里面
                    var tab="<table border='1' bordercolor='blue'>";
                        //循环行
                        for(var i=1;i<=h;i++){
                            tab +="<tr>";
                                //循环单元格
                                for(var j=1;j<=l;j++){
                                    tab+="<td>CBZ</td>";

                                }
                            tab +="</tr>";
                        }
                    tab+="</table>";
                    // alert(tab);
                    var divid = document.getElementById("divid");
                    divid.innerHTML=tab;
                }
            </script>


展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读