JavaScript学习笔记（三）

发布时间：2020-07-17 18:30:46 作者：mirindaRain
来源：网络阅读：387

本课程对应的视频地址：http://edu.51cto.com/course/15019.html

1、DOM

DOM:Document Object Model

JavaScript学习笔记（三）

1.1、W3C规定的三类DOM标准接口

Core DOM（核心DOM），适用于各种结构化文档

XML DOM，专用于XML文档

HTML DOM，专用于HTML文档（了解）

1.2、Core DOM

1.2.1、查找dom

document.getElementById("id"):根据id元素来查找某个对象

document.getElementsByTagName("tag"):根据标签来获取元素-->数组

document.getElementsByName("name"):根据name来获取元素-->数组

nextElementSibling:下一个元素节点
previousElementSibling：上一个元素节点
childNode：子节点（包含文本节点）
children:子元素节点
childElementCount：子元素的数量
lastElementChild:最后一个元素节点
firstElementChild:第一个元素节点
firstChild：第一个节点
lastChild:最后一个节点
nodeType:节点的类型
    元素节点：1
    属性节点：2
    文本节点：3
parentNode：父节点

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function changeImg(){
            var imgObject = document.getElementById("myimg");
            imgObject.src="../images/2.jpg";
        }
        function getData(){
            var seasons = document.getElementsByName("season");
            var str= "";
            for(var i = 0 ;i<seasons.length;i++) {
                str=str+seasons[i].value+"<br/>";
            }
            document.getElementById("result").innerHTML=str;
        }
        function getInputData(){
            var inputs = document.getElementsByTagName("input");
            var str= "";
            for(var i = 0 ;i<inputs.length;i++) {
                str=str+inputs[i].value+"<br/>";
            }
            document.getElementById("result").innerHTML=str;
        }
    </script>
</head>
<body>
    <img src = "../images/1.jpg" id = "myimg"/>
    <input type="button" value="修改图片" onclick="changeImg()"/>

    <input type="text" value="春" name="season"/>
    <input type="text" value="夏" name="season"/>
    <input type="text" value="秋" name="season"/>
    <input type="text" value="东" name="season"/>
    <input type="button" value="得到季节" onclick="getData()"/>
    <input type="button" value="获取所有的input标签的内容" onclick="getInputData()"/>
    <div id = "result">

    </div>
</body>
</html>

也可以通过setAttribute(attr,value)设置对象的属性

imgObject.setAttribute("src","../images/2.jpg");
imgObject.setAttribute("onclick","myFun()");

那么如果想获取属性的值，就可以通过getAttribute（"name"）来获取

如果我们想对对象加样式,通过object.style属性操作

  <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById("box");
            box.style.border="1px solid red";
            box.style.backgroundColor="#ccc";
            box.style.width="300px";
            box.style.height="300px";
        }
    </script>

1.2.2、dom的创建相关操作

案例：

<script type="text/javascript">
        window.onload = function(){
            var div = document.createElement("div");
            div.style.width="400px";
            div.style.height="400px";
            div.style.border="1px solid red";
            document.body.appendChild(div);
            var input = document.createElement("input") ;
            input.setAttribute("type","text");
            input.setAttribute("value","zhangsan");
            div.appendChild(input);
        }
    </script>

与dom相关操作有哪些呢？

createElement：创建一个元素节点

appendChild：将这个元素加入某个元素内部

insertBefore（在某个节点前面插入新的节点）：parentElement.insertBefore(newNode,thisNode)

cloneNode:克隆,有一个参数，默认是false，当为true表示深克隆（连同子节点一起克隆）

案例2：插入兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function (ev) {
            var cc = document.getElementById("cc");
            var li = document.createElement("li");
            li.innerHTML="貂蝉";
            //insertBefore(newNode,已经存在的节点)
            document.body.insertBefore(li,cc);
        }

    </script>
</head>
<body>
    <li>关羽</li>
    <li id="cc">曹操</li>
    <li>狂铁</li>
</body>
</html>

案例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function copy(){
            var img = document.getElementById("id01");
            var newImg = img.cloneNode();
            document.body.insertBefore(newImg,img);
        }
        function copyul(){
            var myul = document.getElementById("myul");
            document.body.appendChild(myul.cloneNode(true));
        }

    </script>
</head>
<body>
    <img id = "id01" src = "../images/1.jpg"/>
    <input type="button" onclick="copy()" value="复制"/>
    <ul id="myul">
        <li>关羽</li>
        <li>盾山</li>
    </ul>
    <input type="button" onclick="copyul()" value="复制ul"/>

</body>
</html>

1.2.3、删除和替换操作

removeChild:删除某个子节点

replaceChild（new,old）:新的替换旧的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function myremove(){
            var img = document.getElementById("id02");
            document.body.removeChild(img);
        }
        function myreplace(){
            var img = document.getElementById("id01");
            var newImg = document.createElement("img");
            newImg.setAttribute("src","../images/5.jpg");
            document.body.replaceChild(newImg,img);
        }
    </script>
</head>
<body>
<img id = "id01" src = "../images/1.jpg"/>
<img id = "id02" src = "../images/2.jpg"/>
<img id = "id03" src = "../images/3.jpg"/>
<input type="button" onclick="myremove()" value="移除"/>
<input type="button" onclick="myreplace()" value="替换操作"/>
</body>
</html>

1.3、练习

1.3.1、隔行变色

<script type="text/javascript">
            window.onload=function(){
                var trs = document.getElementsByTagName("tr");
                for(var i = 0 ;i<trs.length;i++) {
                    if(i%2==0) {
                        trs[i].style.backgroundColor="#ccc";
                    }
                }
            }
    </script>

高亮显示

 <script type="text/javascript">
            window.onload=function(){
                var trs = document.getElementsByTagName("tr");
                //onmouseover :鼠标经过
                //onmouseout:鼠标离开
                for(var i = 0 ;i<trs.length;i++) {
                    trs[i].onmouseover=function(){
                        this.style.backgroundColor='#ccc';
                    };
                    trs[i].onmouseout=function(){
                        this.style.backgroundColor='white';
                    }

                }
            }
    </script>

1.3.2、实现全选，反选等效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        window.onload=function(){
            var allObject = document.getElementById("all");
            var allHobbies = document.getElementsByName("hobby");
            //全选效果
            allObject.onclick=function(){
                for(var i = 0 ;i<allHobbies.length;i++) {
                    allHobbies[i].checked=this.checked;
                }
            }
            for(var i = 0;i<allHobbies.length;i++) {

                allHobbies[i].onclick=function(){
                   allObject.checked=checkAll();
                }
            }
            var fanObject = document.getElementById("fan");
            fanObject.onclick=function(){
                for(var i = 0;i<allHobbies.length;i++) {
                    allHobbies[i].checked=!allHobbies[i].checked;
                }
                //判断是否全部选中
                allObject.checked=checkAll();
            }
        }

        function checkAll(){
            var allHobbies = document.getElementsByName("hobby");
            var flag = true;
            for(var i = 0;i<allHobbies.length;i++) {
                if(allHobbies[i].checked==false){
                    flag=false;
                    break;
                }
            }
            return flag ;
        }
    </script>
</head>
<body>
<input type="checkbox" id="all"/>全选 <input type="checkbox" id="fan"/>反选<br/>
<hr/>
<input type="checkbox" name="hobby">关羽<br/>
<input type="checkbox" name="hobby">曹操<br/>
<input type="checkbox" name="hobby">貂蝉<br/>
</body>
</html>

1.3.3、动态编写一个表格

JavaScript学习笔记（三）

案例实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var table ;
        var thead ;
        var tbody;
        window.onload = function(){
            createTable();
            createTheadData();
            createTbodyData();
        }

        function createTable(){
            table  = document.createElement("table");
            //将table加入到body中
            document.body.appendChild(table);
            thead  = document.createElement("thead");
            //将thead加入了table中
            table.appendChild(thead);
            tbody = document.createElement("tbody");
            table.appendChild(tbody);

            //为table元素添加相关关属性
            table.setAttribute("border","1");
            table.setAttribute("width","100%");
        }
        function createTheadData(){
            //向thead中插入了一行
            var tr = thead.insertRow();
            //tr我需要添加单元格
            var td_id = tr.insertCell();
            td_id.innerHTML="编号";
            var td_name = tr.insertCell();
            td_name.innerHTML="姓名";
            var td_oper = tr.insertCell();
            td_oper.innerHTML="数据操作";
        }
        //生成10条数据
        function createTbodyData(){
            for(var i = 0 ;i<10;i++) {
                var tr = tbody.insertRow();
                var td_id = tr.insertCell();
                td_id.innerHTML=i;
                var td_name = tr.insertCell();
                td_name.innerHTML="张"+i;
                var td_oper = tr.insertCell();
                td_oper.innerHTML='<input type="button" onclick="mydelete(this)" value = "删除"/><input type="button" onclick="updatePre(this)" value = "修改"/>';
            }
        }
        function mydelete(obj) {
            if(confirm('确定删除此行吗')) {
                var tr = obj.parentNode.parentNode;
                var rowIndex = tr.rowIndex-1;
                tbody.deleteRow(rowIndex);
            }
        }
        /*
        *   需要将数据区改为可编辑状态（input）
        *   按钮部分变成确定和取消
        * */
        function updatePre(obj) {
            var td = obj.parentNode ;
            var td_name = td.previousElementSibling;
            var td_id = td.previousElementSibling.previousElementSibling;
            var id = td_id.innerHTML;
            var name = td_name.innerHTML;
            //在js中可以为对象动态添加属性
            td_name.tag=name;
            td_id.tag=id;
            td_name.innerHTML="<input type='text' value='"+name+"'/>";
            td_id.innerHTML="<input type='text' value = '"+id+"'/>";

            //改变数据操作区的按钮
            var btn_confirm = document.createElement("input");
            btn_confirm.setAttribute("type","button");
            btn_confirm.setAttribute("value","确定");
            btn_confirm.setAttribute("onclick","confirmData(this)");
            var btn_cancel = document.createElement("input");
            btn_cancel.setAttribute("type","button");
            btn_cancel.setAttribute("value","取消");
            btn_cancel.setAttribute("onclick","myCancel(this)")
            td.innerHTML="" ;
            td.appendChild(btn_confirm);
            td.appendChild(btn_cancel);
        }

        function myCancel(obj){
            var td = obj.parentNode ;
            var td_name = td.previousElementSibling;
            var td_id = td.previousElementSibling.previousElementSibling;
            td_id.innerHTML=td_id.tag;
            td_name.innerHTML=td_name.tag;
            //还原最后一个td
            td.innerHTML='<input type="button" onclick="mydelete(this)" value = "删除"/><input type="button" onclick="updatePre(this)" value = "修改"/>';
        }
        /*
          id,name必须要非空
        * id不能重复
        * */
        function confirmData(obj) {
            //确定
            var td = obj.parentNode ;
            var td_name = td.previousElementSibling;
            var td_id = td.previousElementSibling.previousElementSibling;
            //首先获取用户输入的值
            var name  = td_name.getElementsByTagName("input")[0].value;
            var id  = td_id.getElementsByTagName("input")[0].value;
            if(name==""||id=="") {
                alert("对不起，数据不能为空");
                return ;
            }
            //判断ID不能重复
            if(isSame(id)) {
                alert("对不起，id不能重复");
                return  ;
            }

            //验证都通过了，那么接下来就是将数据真正的放在单元格中
            td_name.innerHTML=name;
            td_id.innerHTML=id;
            td.innerHTML='<input type="button" onclick="mydelete(this)" value = "删除"/><input type="button" onclick="updatePre(this)" value = "修改"/>';

        }

        function isSame(id){
            var flag = false;
            for(var i = 0 ;i<tbody.rows.length;i++) {
                var tr = tbody.rows[i];
                if(id==tr.firstElementChild.innerHTML) {
                    flag = true
                    break;
                }
            }
            return flag ;
        }

    </script>
</head>
<body>
</body>
</html>

总结：

table对象：

rows属性

insertRow():插入一行

deleteRow():删除一行

tableRow对象：行对象

cells：单元格对象

rowIndex:行号

insertCell():插入单元格

deleteCell():删除单元格

TableCell对象：每个单元格

cellIndex:单元格的索引

JavaScript学习笔记（三）

1、DOM

1.1、W3C规定的三类DOM标准接口

1.2、Core DOM

1.2.1、查找dom

1.2.2、dom的创建相关操作

1.2.3、删除和替换操作

1.3、练习

1.3.1、隔行变色

1.3.2、实现全选，反选等效果

1.3.3、动态编写一个表格

相关阅读