• JavaScriptDOM


    JavaScriptDOM

    DOM:Document Object Model(文本对象模型)

    ——D:文档-html文档或xml文档

    ——O:对象-document对象的属性和方法

    ——M:模型

    ——DOM是针对xml(html)的基于树的api

    ——DOM树:节点(node)的层次

    ——DOM把一个文档表示为一棵家谱树(父、子、兄弟)

    ——DOM定义了Node的接口以及许多种节点类型来标识xml节点的多个方面。

    1.节点及其类型:

    1)元素节点

    2)属性节点:元素的属性,可以直接通过属性的方式来操作。

    3)文本节点:是元素节点的子节点,其内容为文本。

    第一个helloworld文档

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            //1.当整个HTML文档完全加载成功后触发window.onload事件。
            //事件触发时,执行后面function里面的函数体
            window.onload = function () {
                //2.获取所有的button节点,并取得第一个元素
                var click = document.getElementsByTagName("button")[0];
                //3.为button的onclick事件赋值:当点击button时,执行函数体。
                click.onclick = function () {
                    //4.弹出警告框helloworld
                    alert("helloworld");
                }
            }
        </script>
    </head>
    <body>
        <button>Click</button>
    </body>
    </html>
    

      

    2.JS代码写在哪里

    (1)

        <!--HTML代码和js代码耦合在一起-->
        <button onclick="alert('helloworld');">Click</button>
    

    (2)

    <body>
        <button>Click</button>
    </body>
    </html>
    <!--
        在整个HTML文档被加载后,获取其中的节点,
        把script节点放在html文档的最后
        但不符合些JS代码的习惯
    -->
    <script type="text/javascript">
        //1.获取button
        var btns = document.getElementsByTagName("button");
        alert(btms.length);
    
        //2.为button添加onclick事件
        btns[0].onclick = function () {
            alert("helloworld");
        }
    </script>

    (3)标准

        <script type="text/javascript">
            //window.onload事件在整个html文档被完全加载后出发执行。
            //所以在其中可以获取到html文档的任何元素
            window.onload = function () {
                
            }
        </script>
    </head>
    <body>
        <button>Click</button>
    </body>
    

      

    3.如何获取元素节点:

      1)document.getElementById:根据id属性获取对应的单个节点

      2)document.getElementsByTagName:根据标签名获取指定的节点名

      3)document.getElementsByName:根据节点的name属性获取符合条件的节点数组

    4.获取属性节点:

      1)可以直接通过cityNode.id这样的方式获取和设置属性节点的值

      2)通过元素节点的getAttributeNode方法来获取属性节点,然后再通过nodeValue来读写

        <script type="text/javascript">
            //window.onload事件在整个html文档被完全加载后出发执行。
            //所以在其中可以获取到html文档的任何元素
            window.onload = function () {
                //1.获取#city节点的所有子节点
                var cityNode = document.getElementById("city");
                //2.利用元素节点的childNodes方法可以获取指定元素节点的所有子节点
                //但该方法不实用,包含文本节点(空白的部分)
                alert(cityNode.childNodes.length);
                //3.获取#city节点的所以li子节点(实用)
                var cityLiNodes = cityNode.getElementsByTagName("li");
                alert(cityLiNodes.length);
    
                //4.获取指定节点的第一个子节点和最后一个子节点(实用)
                alert(cityNode.firstChild);
                alert(cityNode.lastChild);
            }
        </script>

    5.获取元素节点的子节点

    1)childNodes属性获取全部的子节点

    2)firstChild属性获取第一个子节点

    3)lastChild属性获取最后一个子节点

    6.获取文本节点:

    1)步骤:元素节点-->获取元素节点的子节点

    2)若元素节点只有文本节点一个子节点

    例如:

    <li id="bj" name="BeiJing"> 北京</li>
    可以先获取到指定的元素节点eleNode,
    然后利用eleNode.firstChild.nodeValue的方法来读写其文本节点的值
            window.onload = function () {
                //文本节点一定是元素节点的子节点
                //1.获取文本节点所在的元素节点
                var bjNode = document.getElementById("bj");
                //2.通过firstChild定义到文本节点
                var bjTextNode = bjNode.firstChild;
                //3.通过操作文本节点的nodeValue属性来读写文本节点的值
                alert(bjTextNode.nodeValue);
    
                bjTextNode.nodeValue = "尚硅谷";
            }
    
           window.onload = function () {
    
                var cityLi = document.getElementsByTagName("li");
                for (var i =0;i<cityLi.length;i++){
                    cityLi[i].onclick = function () {
                        alert(i);//8
                    }
                }
            }
    

      

    7..节点的属性:

    1)nodeName:代表当前节点的名字,只读属性。如果给定节点是一个文本节点,nodeName

    2)nodeType:返回一个整数,这个数值代表着给定节点的类型,只读属性。

    3)nodeValue:返回给定节点的当前值(字符串),可读写的属性

      <1>元素节点:返回值为null

      <2>属性节点:返回值是这个属性的值

      <3>文本节点:返回值是这个文本节点的内容

      window.onload = function () {
    
                //1.元素节点的3个属性
                var bjNode = document.getElementById('bj');
                alert(bjNode.nodeType);//元素节点:1
                alert(bjNode.nodeName);//节点名:li
                alert(bjNode.nodeValue);//元素节点没有nodeValue属性值:null
    
                //2,属性节点
                var nameAttr = document.getElementById("name").getAttributeNode("name");
                alert(nameAttr.nodeType);//属性节点:2
                alert(nameAttr.nodeName);//属性节点的节点名:属性名name
                alert(nameAttr.nodeValue);//属性节点的nodeValue属性值:属性值
    
                //3.文本节点
                var textNode = bjNode.firstChild;
                alert(textNode.nodeType);//文本节点:3
                alert(textNode.nodeName);//文本节点的节点名#text
                alert(textNode.nodeValue);//文本节点的nodeValue属性值:文本值
                
            }

      nodeType、nodeName是只读的

      而nodeValue是可以被改变的

      以上三个属性,只有在文本节点中使用nodeValue读写文本值时使用最多。

      

    实验一:提示框为文本节点内容

        <script type="text/javascript">
            window.onload = function () {
    
                var cityLi = document.getElementsByTagName("li");
                for (var i =0;i<cityLi.length;i++){
                    cityLi[i].onclick = function () {
                        alert(this.firstChild.nodeValue);
                    }
                }
            }
        </script>

    实验二:li节点的文本值没有^^开头,加上,有,则去除。

        <script type="text/javascript">
            window.onload = function () {
                var reg = /^^{2}/g;
                var cityLi = document.getElementsByTagName("li");
                for (var i =0;i<cityLi.length;i++){
                    cityLi[i].onclick = function () {
                        var val = this.firstChild.nodeValue;
                        if (reg.test(val)) {
                            val = val.replace(reg,"");
                        }else {
                            val = "^^"+val;
                        }
                        this.firstChild.nodeValue = val;
                    }
                }
            }
        </script>
    

      

    8.创建一个元素节点:

      1)createElement():按照给定的标签名创建一个新的元素节点。方法只有一个参数:被创建的方法的返回值,是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的nodeType属性值等于1.

      新元素节点不会自动添加到文档里,他只是一个存在于javascript上下文的对象。

    9.创建一个文本节点:

      1)createTextNode():创建一个包含着给定文本的新文本节点。

      这个方法的返回值是一个指向新创建文本节点引用指针,

      它是一个文本节点,所以它的nodeType属性等于3.

      方法只有一个参数,新建文本节点包含的文本字符串,新元素节点不会自动添加到文档里

          window.onload = function () {
                var liNode = document.createElement("li");
                var xmText = document.createTextNode("厦门");
                liNode.appendChild(xmText);
                var cityNode = document.getElementById("city");
                cityNode.appendChild(liNode);
            }
    

      

    练习:选择type添加到该type中li节点

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            /**需求1:点击submit按钮时,检查是否选择type,若没有选择给出提示:“请选择类型”
             * 检查文本框是否输入(可以去除前后空格),若没有输入,则给出提示:“请输入内容”
             *若检查都通过,则在相应的ul节点中添加对应的li节点
             * 需求2:使包括新增的li都能相应onclick事件:弹出li文本值
             *
             */
    
            window.onload = function () {
    
                function showContent(liNode) {
                    alert("^_^" + liNode.firstChild.nodeValue);
                }
                var liNodes = document.getElementsByTagName("li");
                for (let i = 0; i < liNodes.length ; i++) {
                    liNodes[i].onclick = function () {
                        showContent(this);
                    }
                }
    
               //1.获取#submit对应的按钮submitBtn
                var submit = document.getElementById("submit");
                
                //2.为submitBtn添加onclick响应函数
                submit.onclick = function () {
                    //3.在onclick响应函数的结尾添加return false,就可以取消提交按钮的默认行为。
    
                    //4.检查是否选择type,若没有选择给出提示:"请选择类型"
                    //4.1选择所有的name="type" 的节点types
                    var types = document.getElementsByName("type");
    
                    //4.2遍历types,检查其是否有一个type的checked属性存在,就可以说明
                    //有一个type被选中了:通过if(元素节点.属性名来判断某一个元素节点是否有该属性。
                    var typeVal = null;
                    for (var i=0;i<types.length;i++){
                        if(types[i].checked){
                            typeVal = types[i].value;
                            break;
                        }
    
                    }
                    
                    //4.3若没有任何一个type被选中,则弹出:"请选择类型".响应方法结束:
                    //return false
                    if (typeVal == null){
                        alert("请选择类型");
                        return false;
                    }
    
                    //5.获取name="name"的文本值:通过value属性:nameVal
                    var nameEle = document.getElementsByName("name")[0];
                    var nameVal = nameEle.value;
    
                    //6.把nameVal和""进行比较,若是""说明只出入了空格,弹出"请输入"
                    var reg = /^s*|s*$/g;
                    nameVal = nameVal.replace(reg,"");
    
                    //使name的文本框也去除前后空格
                    nameEle.value = nameVal;
                    if (nameVal == ""){
                        alert("请输入内容");
                        return false;
                    }
    
                    //7.创建li节点
                    var liNode = document.createElement("li");
    
                    //8.利用nameVal创建文本节点
                    var content = document.createTextNode(nameVal);
    
                    //9.把8加为7的子节点
                    liNode.appendChild(content);
                    liNode.onclick = function(){
                        showContent(liNode);
                    }
                    //10.把7加为选择type对应的ul的子节点
                    document.getElementById(typeVal).appendChild(liNode);
    
                    return false;
                }
    
    
            }
        </script>
    </head>
    <body>
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj" >  北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br><br>
        <p>你最喜欢哪个游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br><br>
        <form action="" name="myform">
            <input type="radio" name="type" value="city">城市
            <input type="radio" name="type" value="game">游戏
    
            name:<input type="text" name="name">
    
            <input type="submit" value="Submit" id="submit">
        </form>
    </body>
    </html>
    

    11.节点的替换:

      1)replaceChild():把一个给定父元素里的一个子节点替换为另外一个子节点

          var reference = element.replaceChild(newChild,oldChild);

        返回值是一个指向已被替换的哪个子节点的引用指针

      2)该节点除了替换功能以外还有移动的功能

      3)该方法只能完成单向替换,若需要使用双向替换,需要自定义函数:  

          //自定义互换两个节点的函数
            function replaceEach(aNode,bNode) {
                //1.获取aNode和bNode的父节点,使用parentNode属性
                var aParent = aNode.parentNode;
                var bParent = bNode.parentNode;
    
                if (aParent && bParent){
                    //2.克隆aNode或bNode
                    var aNode2 = aNode.cloneNode(true);
    
                    //3.分别调用aNode的父节点和bNode的父节点的replaceChild
                    //方法实现节点的互换
                    bParent.replaceChild(aNode2,bNode);
                    aParent.replaceChild(bNode,aNode);
                }
            }  

    练习:

      实现两个节点互相交换,并且可以再次交换

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
    
            window.onload = function () {
                //1.获取所有的li节点
                var liNodes = document.getElementsByTagName("li");
    
                //2.为每一个li节点添加onclick响应函数
                for (var i = 0; i < liNodes.length; i++) {
                    liNodes[i].index = i;
    
                    liNodes[i].onclick = function () {
                        //3.找到和当前节点对应的那个li节点
                        var targetIndex = 0;
                        if (this.index<4){
                            targetIndex = 4 + this.index;
                        } else{
                            targetIndex = this.index -4;
                        }
                        //交换index属性
                        var tempIndex = this.index;
                        this.index = liNodes[targetIndex].index;
                        liNodes[targetIndex].index = tempIndex;
    
                        //4.互换
                        replaceEach(this,liNodes[targetIndex]);
                    }
                }
                //自定义互换两个节点的函数
                function replaceEach(aNode,bNode) {
                    //1.获取aNode和bNode的父节点,使用parentNode属性
                    var aParent = aNode.parentNode;
                    var bParent = bNode.parentNode;
    
                    if (aParent && bParent){
                        //2.克隆aNode或bNode
                        var aNode2 = aNode.cloneNode(true);
    
                        //克隆a节点的同时,把onclick事件也复制
                        aNode2.onclick = aNode.onclick;
    
                        //交换index属性
                        aNode2.index = aNode.index;
    
                        //3.分别调用aNode的父节点和bNode的父节点的replaceChild
                        //方法实现节点的互换
                        bParent.replaceChild(aNode2,bNode);
                        aParent.replaceChild(bNode,aNode);
                    }
                }
            }
    
        </script>
    </head>
    <body>
        <p>你喜欢哪个城市?</p>
        <ul id="city">
            <li id="bj" >  北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>
        <br><br>
        <p>你最喜欢哪个游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>
        <br><br>
        <form action="" name="myform">
            <input type="radio" name="type" value="city">城市
            <input type="radio" name="type" value="game">游戏
    
            name:<input type="text" name="name">
    
            <input type="submit" value="Submit" id="submit">
        </form>
    </body>
    </html>
    

    value:用于获取html表单元素的值

    nodevalue:用于获取文本节点的文本值

      

    13.删除节点:

      1)removeChild():从一个给定元素里删除一个子节点

        var reference = element.removeChild(node);

        返回值是一个指向已被删除的子节点的引用指针,

        某个节点被removeChild方法删除时,这个节点所包含的所有子节点将同时删除。

        如果想删除某个节点,但不知道它的父节点是哪一个,parentNode属性可以帮忙

      window.onload = function () {
                var liNodes = document.getElementsByTagName("li");
    
                for (var i = 0; i < liNodes.length ; i++) {
                    liNodes[i].onclick = function () {
                        var flag = confirm("确认要删除" + this.firstChild.nodeValue + "的信息吗?")
    
                        if (flag){
                            this.parentNode.removeChild(this);
                        } 
                    }
                }
            }
    

    练习:

    插入删除员工

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            /**
             * 1.弹出确认对话框:确定要删除xx的信息吗?xx为当前a节点所在td所在的tr的第一个td子节点的文本值,且要去除前后空格。
             * 2.若点击“确认”,则删除a节点所在的行
             *
             * 注意:
             * 1.a节点是一个超级链接,可以在其onclick事件中通过返回false,来取笑默认行为
             * 2.tr的直接父节点在tbody,而不是table
             * 3.可以把去除前后空格的代码写成一个trim(str)函数
             *
             * 为addEmpButton添加onclick响应函数:
             * 1.获取#name,#email,#salary的文本框的值
             * 2.利用1获取文本值创建3个th节点,在创建一个tr节点,并把以上3个th节点加为tr节点的子节点中
             * 3.在创建一个th节点:<th><a href="">delete</a></th>
             * 4.把3创建的td也加为tr的子节点
             * 5.再把tr加为employeetable的tbody的子节点的子节点
             * 6.为新创建的tr的a子节点添加onclick函数,也具备删除功能
             */
            function removeTr(aNode) {
                var trNode = aNode.parentNode.parentNode;
    
                var textContent = trNode.getElementsByTagName("th")[0].firstChild.nodeValue;
    
                textContent = trim(textContent);
    
                var flag = confirm("确定要删除" + textContent + "信息吗?");
                if (flag) {
                    trNode.parentNode.removeChild(trNode);
                }
                function trim(str) {
                    var reg = /^s*|s*$/g;
                    return str.replace(reg,"");
                }
            }
            window.onload = function () {
                var aNodes = document.getElementById("employeetable").getElementsByTagName("a");
                for (var i = 0; i<aNodes.length;i++){
                    aNodes[i].onclick = function(){
                        removeTr(this);
                        return false;
                    }
                }
                document.getElementById("addEmpButton").onclick = function () {
                    var nameVal = document.getElementById("name").value;
                    var emailVal = document.getElementById("email").value;
                    var salaryVal = document.getElementById("salary").value;
                    var nameTh = document.createElement("th");
                    nameTh.appendChild(document.createTextNode(nameVal));
                    var emailTh = document.createElement("th");
                    emailTh.appendChild(document.createTextNode(emailVal));
                    var salaryTh = document.createElement("th");
                    salaryTh.appendChild(document.createTextNode(salaryVal));
                    var newTr = document.createElement("tr");
    
                    newTr.appendChild(nameTh);
                    newTr.appendChild(emailTh);
                    newTr.appendChild(salaryTh);
    
                    //delete
                    var aNode = document.createElement("a");
                    aNode.href="";
                    aNode.appendChild(document.createTextNode("delete"));
                    var aTd = document.createElement("th");
                    aTd.appendChild(aNode);
                    newTr.appendChild(aTd);
                    aNode.onclick = function(){
                        removeTr(this);
                        return false;
                    }
    
                    document.getElementById("employeetable").getElementsByTagName("tbody")[0].appendChild(newTr);
    
                }
    
    
            }
    
    
        </script>
    </head>
    <body>
        <center>
            <br><br>添加新员工<br><br> name:<input type="text"
        name="name" id="name" >   email:<input type="text"
        name="email" id="email" >  <input type="text"
                                                    name="salary" id="salary">
        <br><br>
        <button id="addEmpButton">Submit</button>
            <br><br>
            <hr>
            <br><br>
            <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
                <tbody>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th> </th>
                </tr>
                <tr>
                    <th>Tom</th>
                    <th>tom@tom.com</th>
                    <th>5000</th>
                    <th><a href="">delete</a> </th>
                </tr>
                <tr>
                    <th>Jerry</th>
                    <th>jerry@tsohu.com</th>
                    <th>8000</th>
                    <th><a href="">delete</a> </th>
                </tr>
                </tbody>
            </table>
        </center>
    </body>
    </html>
    

    12.插入节点:

       1)insertBefore():把一个给定节点插入到一个给定元素节点的给定子节点的前面

    var reference = element.insertBefore(newNode,targetNode);

    节点newNode将被插入到元素节点element中并出现在节点targetNode的前面,节点targerNode必须是element元素额一个子节点。

           2)自定义insertAfter()方法 

        <script type="text/javascript">
    
            window.onload = function () {
                var cityNode = document.getElementById("city");
                var bj = document.getElementById("bj");
                var rl = document.getElementById("rl");
               /* cityNode.insertBefore(rl,bj);*/
            
                var  refNode = document.getElementById("dj");
                insertAfter(rl,refNode);
            }
            //把newNode插入到refNode的后面
            function insertAfter(newNode,refNode) {
                //1.测试refNode是否为其父节点的最后一个子节点
                var parentNode = refNode.parentNode;
                if (parentNode){
                    //该父元素节点的最后一个字节点
                    var lastNode = parentNode.lastChild;
    
                    //2.若是:直接把newNode插入为refNode父节点的最后一个子节点
                    if (refNode == lastNode){
                        parentNode.appendChild(newNode);
                    }
                    //3.若不是:获取refNode的下一个兄弟节点,然后插入到其下一个兄弟节点的前面
                    else {
                        var nextNode = refNode.nextSibling;
                        parentNode.insertBefore(newNode,nextNode);
                    }
                }
            }
    
        </script>
    

      

    14.innerHTML属性

      1)浏览器几乎都支持该属性,但不是DOM标准的组成部分

      innerHTML属性可以用来读,写某给定元素里的HTML内容

    练习:

    全选/全不选/反选

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("checkedAll_2").onclick = function () {
                    var flag = this.checked;
                    var items = document.getElementsByName("items");
    
                    for (var i = 0;i<items.length;i++){
                        items[i].checked = flag;
                    }
                }
    
                var items = document.getElementsByName("items");
                for (var i = 0; i < items.length; i++) {
                    items[i].onclick = function () {
                        //记录有多少个items被选中了
                        var number = 0;
                        for (var j = 0; j < items.length; j++) {
                            if (items[j].checked){
                                number++;
                            }
                        }
                        document.getElementById("checkedAll_2").checked =
                            (items.length==number);
                    }
                }
    
                var checkAll = document.getElementById("CheckedAll");
                checkAll.onclick = function () {
                    for (var i = 0 ; i < items.length;i++){
                        items[i].checked = "checked";
                    }
                }
                var checkno = document.getElementById("CheckedNo");
                checkno.onclick = function () {
                    for (var i = 0 ; i < items.length;i++){
                        items[i].checked = "";
                    }
                }
                var checkrev = document.getElementById("CheckedRev");
                checkrev.onclick = function () {
                    for (var i = 0 ; i < items.length;i++){
                        items[i].checked = !items[i].checked;
                    }
                }
                document.getElementById("send").onclick = function () {
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].checked){
                            alert(items[i].value);
                        }
                    }
                }
            }
    
        </script>
    </head>
    <body>
        <form method="post" action="">
            你爱好的运动是?
            <input type="checkbox" id="checkedAll_2">全选/全不选
            <br>
            <input type="checkbox" name="items" value="足球">足球
            <input type="checkbox" name="items" value="篮球" >篮球
            <input type="checkbox" name="items" value="羽毛球">羽毛球
            <input type="checkbox" name="items" value="乒乓球">乒乓球
            <br>
            <input type="button" id="CheckedAll" value="全选">
            <input type="button" id="CheckedNo" value="全不选">
            <input type="button" id="CheckedRev" value="反选">
            <input type="button" id="send" value="提交">
        </form>
    </body>
    </html>
    

      

  • 相关阅读:
    PHP自动加载(__autoload和spl_autoload_register)
    抽象工厂模式
    工厂方法模式
    简单工厂模式
    组合
    二叉树的层次遍历 II
    umask命令
    二叉树的所有路径
    CDN缓存的理解
    Js中RegExp对象
  • 原文地址:https://www.cnblogs.com/yangHS/p/10860550.html
Copyright © 2020-2023  润新知