JS的相关案例(day04)

1)案例一:在末尾添加节点

    第一步:获取到ul标签
    第二步:创建li标签
    第三步:创建文本
    第四步:把文本添加到li下面(使用appendChild方法)
    第五步:把li添加到ul末尾(使用appendChild方法)

2)元素对象(element对象)

    要操作element对象,首先必须要获取到element
        - 使用document里面相应的方法获取

    方法:
        I. 获取属性里面的值        getAttribute("属性名称");

        II. 设置属性里面的值        setAttribute("属性名称","属性值");

        III. 删除属性里面的值        removeAttribute("属性名称","属性值"); 【不能删除 value值】

3)Node对象的属性一

        nodeName、nodeType、nodeValue

        使用dom解析html的时候,需要html里面的标签、属性和文本都封装成对象。

        标签节点对应的值
                nodeName:大写的标签名称        比如SPAN
                nodeType:1
                nodeValue:null

        属性节点对应的值
                nodeName:属性名称
                nodeType:2
                nodeValue:属性的值

        文本节点对应的值
                nodeName:#text
                nodeType:3
                nodeValue:文本内容

4)Node对象的属性二

    I. 父节点
            - ul是li的父节点(parentNode)

可以直接通过li获取到ul的标签

    II. 子节点
            - li是ul的子节点
            - childNodes:得到所有的子节点,但兼容性很差
            - firstChild:获取第一个子节点
            - lastChild:获取最后一个子节点

    III. 同辈节点
            - 文本为AAAA的li和其他li均为同辈节点
            - nextSibling:返回一个给定节点的下一个兄弟节点
            - previousSibling:返回一个给定节点的上一个兄弟节点

5)操作DOM树

        A. appendChild方法    
                添加子节点到末尾,类似于剪切粘贴的效果

点击copy前
点击copy后

        B. insertBefore(newNode, oldNode)方法
                在某个节点前插入一个新节点
                两个参数
                        newNode:要插入的节点
                        oldNode:在谁之前插入
                如果插入一个节点,该节点不存在,则创建
                    I. 创建标签
                    II. 创建文本
                    III. 把文本添加到标签
                    IV. 获取到ul
                    V. 把新创建的标签添加到ul下面

没有insertAfter()方法
点击insert前
点击insert后

        C. removeChild()方法
                删除节点
                通过父节点删除,不能自己删除自己

点击remove之前
点击remove之后

        D. replaceChild(newNode,oldNode)方法
                替换节点
                通过父节点替换,不能自己替换自己
                两个参数
                        newNode:想要换的节点
                        oldNode:被换掉的节点

点击replace之前
点击replace之后

        E. cloneNode(boolean)
                复制节点

点击clone之前
点击clone之后

6)innerHTML属性(★★★★★)

    这个属性不是dom的组成部分,但是大多数浏览器都支持的属性

第一个作用:获取文本内容
        // 获取span标签
        var span1 = document.getElementById("sid");
        alert(span1.innerHTML);

第二个作用:向标签里面设置内容(可以是html代码)
        // 在div里面设置内容<h1>BBBB</h1>
        var div = document.getElementById("div1");
        div.innerHTML = "<h1>BBBB</h1>";

        练习:向div里面添加一个表格

7)案例二:动态显示时间

    要求:在页面上显示时间,并动态更新。

页面中使用定时器,每一秒获取一次时间
时间是动态变化的

8)案例三:全选练习

    需求:通过按钮和□控制下列复选框的选择

页面效果的代码

9)案例四:省市联动

    完成如下功能,在选择完阵营后,出现相关的名称。

        步骤:
                创建页面
                创建二维数组,来存储数据
                得到两个下拉选择框的标签
                遍历第一个下拉选择框内的元素
                同时遍历每个一维数组,拿到数组中的第一个值和传递过来的值做比较
                如果相同,获取第一个值后面的元素
                得到新下拉选择框并添加信息    - appendChild方法
                由于每次都需要添加option,所以第二次添加的时候,就要进行判断

页面效果代码
逻辑代码

10)案例五:动态生成表格

    需求:在输入框中输入相应的行和列,生成对应的表格

效果图
页面效果代码

推荐阅读更多精彩内容