3.0 DOM基础加强

作者: 笑笑学生 | 来源:发表于2018-02-09 11:13 被阅读19次

DOM是什么？组成部分?

document object model 文档对象模型
是W3C组织制订的一套用于访问XML和HTML文档的标准.允许脚本动态地访问和更新文档的内容、结构和样式.

分类

DOM Core
XML DOM
HTML DOM

XML介绍

html它的主要作用是:显示
xml它的主要作用是:信息的存储和传送。

把html有嵌套层次关系的文档看做一个对象document

Node:节点

Document:代表整个文档
Element:代表一个标记（元素）
Text:标记中的文本
Attribute:代表一个属性。元素才有属性

XML DOM和HTML DOM

XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式符合XML语法标准，所以可以使用XML DOM API

在XML DOM每个元素，都会被解析为一个节点Node。
HTML DOM 定义了针对HTML文档的对象，可以说是一套更加适用于JavaScript技术开发的API
HTML DOM是对XML DOM的扩展
进行JavaScript DOM开发，可以同时使用 XML DOM和 HTML DOM

xml:可扩展标记语言。相对HTML来讲的

HTML:<a>标签,代表着一个超链接，含义是固定的。说明HTML标记是有限的。
XML:<黑马>黑马不黑</黑马> 自定义标签，扩展性很强。

可不可以把HTML当做XML来看。

XML DOM方式解析HTML,还能解析XML.
HTML DOM方式解析HTML。

练习

先用XML DOM解析HTML(很麻烦)
再用HTML DOM解析HTML(很简单)

如果把HTML当做XML对待，不会忽略回车空格和制表符。

DOM的基本属性

常用方法：

getElementById()返回对拥有指定 id 的第一个对象的引用，在html中，每个标签要有唯一的id。对于id的管理浏览器处理不严格的。
getElementsByName()返回带有指定名称的对象集合
getElementsByTagName()返回带有指定标签名的对象集合

实例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Document.html</title>
<script type="text/javascript">
    window.onload = function(){
        var i1Obj = document.getElementById("i1");
        alert(i1Obj.value);
        
        var ps = document.getElementsByName("password");    //数组
        for(var i=0;i<ps.length;i++){
            alert(ps[i].value);
        }
        
        var inputObjs = document.getElementsByTagName("input");
        for(var i=0;i<inputObjs.length;i++){
            alert(inputObjs[i].value);
        }
    }
</script>
</head>
<body>
    <input type="text" id="i1" name="password"><br/>
    <input type="text" id="i2" name="password"><br/>
</body>
</html>

DOM 节点常用属性:

nodeName

如果节点是元素节点，nodeName返回这个元素的名称
如果是属性节点，nodeName返回这个属性的名称
如果是文本节点，nodeName返回一个内容为#text 的字符串

nodeType

Node.ELEMENT_NODE ---1 -- 元素节点
Node.ATTRIBUTE_NODE ---2 -- 属性节点
Node.TEXT_NODE ---3 -- 文本节点

nodeValue

如果给定节点是一个属性节点，返回值是这个属性的值
如果给定节点是一个文本节点，返回值是这个文本节点内容
如果给定节点是一个元素节点，返回值是 null

实例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Node</title>
<script type="text/javascript">
    //XML DOM
    window.onload=function(){
        var divObj = document.getElementById("d1");
        //打印元素节点的三个属性
        //alert("nodeName="+divObj.nodeName+";nodeType="+divObj.nodeType+";nodeValue="+divObj.nodeValue);
        
        //打印属性的三个属性：如何得到属性节点
        var styleNode = divObj.getAttributeNode("style");// XML DOM方式获得元素中的属性节点 (属性节点的nodeValue取值老的IE有问题)
        //alert("nodeName="+styleNode.nodeName+";nodeType="+styleNode.nodeType+";nodeValue="+styleNode.nodeValue);
        
        var textNode = divObj.firstChild;
        alert("nodeName="+textNode.nodeName+";nodeType="+textNode.nodeType+";nodeValue="+textNode.nodeValue);
    }
</script>
</head>
<body>
    <div id="d1" style="width: 500px;height: 200px;border: blue 1px solid;background-color: #c3f3c3;">黑马有点不黑</div>
</body>
</html>

实例3：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    window.onload = function(){
        var h1Obj = document.getElementById("h1");
        //alert(h1Obj.firstChild.nodeValue);
        
        //alert(h1Obj.innerHTML);   //innerHTML不是标准的。
        
        var nodes = h1Obj.childNodes;
        alert(nodes[0].nodeValue);
    }
</script>
</head>
<body>
    <h1 id="h1">黑马程序员</h1>
</body>
</html>

实例4：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    //汉字内容打印
    window.onload = function(){
    /**
        //方式1：
        document.getElementById("bt1").onclick = function(){
            //根据标签名称获得所有li节点
            var lis = document.getElementsByTagName("li");
            //遍历li节点
            for(var i=0;i<lis.length;i++){
                //得到他们的所有的孩子节点
                var childs = lis[i].childNodes;
                //是文本节点，就把内容打印出来
                for(var j=0;j<childs.length;j++){
                    if(childs[j].nodeType == 3){
                        alert(childs[j].nodeValue);
                    }
                }
            }
        }
    **/
    
        //方式2：
        document.getElementById("bt1").onclick = function(){
            //alert("haha");
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                treewalk(lis[i]);
            }
        }
        //递归
        function treewalk(node){
            if(node.nodeType == 3){
                alert(node.nodeValue);
            }else{
                //得到孩子节点
                var nodes = node.childNodes;    
                for(var i=0;i< nodes.length;i++){
                    treewalk(nodes[i]);
                }
            }
        }       
    }
</script>
</head>
<body>
    <ul>
        <li id="bj" value="beijing">
            北京
            <h1>海淀</h1>
            奥运
        </li>
        <li id="sh" value="shanghai">
            上海
        </li>
        <br/>
    </ul>
    <input type="button"  id="bt1" value="取值"/>
</body>
</html>

实例5：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    //XML DOM
    window.onload = function(){
        document.getElementById("bt1").onclick = function(){
            var nodes = document.getElementById("edu").childNodes;
            alert(nodes.length);
            for(var i=0;i<nodes.length;i++){
                if(nodes[i].nodeType==1){
                    alert(nodes[i].firstChild.nodeValue);
                }
            }
        }
    }
</script>
</head>
<body>
    <select id="edu" name="edu">
        <option value="BS">博士</option>
        <option value="SS">硕士</option>
        <option value="BK">本科</option>
        <option value="ZK">专科</option>
        <option value="GZ">高中</option>
        <option value="CZ">初中</option>
        <option value="XX">小学</option>
        <option value="TJ">胎教</option>
    </select>
    <input type="button" id="bt1" value="取值"/>
</body>
</html>

实例6：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    //XML DOM节点替换
    window.onload=function(){
        document.getElementById("name").onclick=function(){
            //点击时：牛骞被  打灰机 节点替换
            var nameNode = document.getElementById("name");
            var playNode = document.getElementById("play");
            
            //通过nameNode的父标签来操作替换
            nameNode.parentNode.replaceChild(playNode,nameNode);
        }
    }
</script>
</head>
<body>
    <ul>
        <li id="name">牛骞</li>
        <li>刘飞</li>
    </ul>
    <ul>
        <li id="play">
            打<p>灰机</p>
        </li>
        <li>吃西瓜</li>
    </ul>
</body>
</html>

实例7：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    //添加一项：<option value="TJ">胎教</option>
    window.onload = function(){
        document.getElementById("bt1").onclick = function(){
            //创建option元素
            var optionE = document.createElement("option"); 
            //添加属性和文本字节点
            optionE.setAttribute("value","TJ");
            
            var textNode = document.createTextNode("胎教");
            optionE.appendChild(textNode);
            
            //得到id=edu节点，添加一个孩子节点
            document.getElementById("edu").appendChild(optionE);
        }
    }
</script>
</head>
<body>
    <select id="edu" name="edu">
        <option value="BS">博士</option>
        <option value="SS">硕士</option>
        <option value="BK">本科</option>
        <option value="ZK">专科</option>
        <option value="GZ">高中</option>
        <option value="CZ">初中</option>
        <option value="XX">小学</option>
    </select>
    <input type="button" id="bt1" value="添加"/>
</body>
</html>

实例8：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("bt1").onclick=function(){
            //添加一行到表格的末尾
            
            /*
            <tr>
                <td>陈冠希</td>
                <td>cgx@itheima.com</td>
                <td>28</td>
                <td>
                    <input type="button" value="删除" onclick="del(this)"/>
                </td>
            </tr>
            */
            
            var nameValue = document.getElementById("name").value;
            var emailValue = document.getElementById("email").value;
            var ageValue = document.getElementById("age").value;
            
            //创建tr元素，依次创建td和文本
            var trNode = document.createElement("tr");  // <tr></tr>
            var tdNameNode = document.createElement("td");  // <td></td>        
            tdNameNode.appendChild(document.createTextNode(nameValue)); //<td>name</td>
            
            var tdEmailNode = document.createElement("td");
            tdEmailNode.appendChild(document.createTextNode(emailValue));
            
            var tdAgeNode = document.createElement("td");   
            tdAgeNode.appendChild(document.createTextNode(ageValue));   
            
            
            var inputNode = document.createElement("input");//<input/>
            //<input type="button" value="删除" onclick="del(this)"/>
            inputNode.setAttribute("type", "button");
            inputNode.setAttribute("value", "删除");
            inputNode.setAttribute("onclick", "del(this)");
            
            var tdOpNode = document.createElement("td");    
            tdOpNode.appendChild(inputNode);    
            
            //把td添加到tr上
            trNode.appendChild(tdNameNode);
            trNode.appendChild(tdEmailNode);
            trNode.appendChild(tdAgeNode);
            trNode.appendChild(tdOpNode);
            
            //把tr搞到table上
            //创建一个tbody，把tr搞到tbody，再把tbody搞到table上
            var tbodyNode = document.createElement("tbody");
            tbodyNode.appendChild(trNode);
            document.getElementById("t1").appendChild(tbodyNode);
        }
    }

    function del(obj){
        var trParent = obj.parentNode.parentNode.parentNode;
        trParent.removeChild(obj.parentNode.parentNode);
    }
</script>
</head>
<body>
    姓名：<input type="text" id="name" name="name"/>
    邮箱：<input type="text" id="email" name="email"/>
    年龄：<input type="text" id="age" name="age"/><br/>
    <input type="button" id="bt1" value="添加"/>
    <hr/>
    <table id="t1" border="1" width="438">
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>陈冠希</td>
            <td>cgx@itheima.com</td>
            <td>28</td>
            <td>
                <input type="button" value="删除" onclick="del(this)"/>
            </td>
        </tr>
    </table>
</body>
</html>

注意：
深入浅出tbody：
http://blog.csdn.net/seabreezesuper/article/details/62428321

实例9：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    window.onload=function(){
        //<input id="selectDeSelectAll" type="checkbox">全选/全不选<br/>
        document.getElementById("selectDeSelectAll").onclick=function(){
            var hobby = document.getElementsByName("hobby");
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=this.checked;
            }
        }
        document.getElementById("bt1").onclick=function(){
            var hobby = document.getElementsByName("hobby");
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=true;
            }
        }
        document.getElementById("bt2").onclick=function(){
            var hobby = document.getElementsByName("hobby");
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=false;
            }
        }
        document.getElementById("bt3").onclick=function(){
            var hobby = document.getElementsByName("hobby");
            for(var i=0;i<hobby.length;i++){
                hobby[i].checked=!hobby[i].checked;
            }
        }
    }
</script>
</head>
<body>
    <input id="selectDeSelectAll" type="checkbox">全选/全不选<br/>
    <input type="checkbox" name="hobby" value="eat"/>吃饭
    <input type="checkbox" name="hobby" value="sleep"/>睡觉
    <input type="checkbox" name="hobby" value="java"/>学Java
    <br/>
    <input type="button" id="bt1" value="全选"/>
    <input type="button" id="bt2" value="全不选"/>
    <input type="button" id="bt3" value="反选"/>
</body>
</html>

实例10：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    window.onload=function(){
        //<input type="button" id="toRight" value="-->"/><br/>
        
        document.getElementById("toRight").onclick=function(){
            //左边的到右边的
            //得到左侧的select中的option元素，被选中的，搞到右边去
            var leftSelectNode = document.getElementById("leftSelect");
            var nodes = leftSelectNode.childNodes;
            for(var i=0;i<nodes.length;i++){
                if(nodes[i].nodeType==1){
                
                    //getAttribute("selected")浏览器的兼容性问题
                    //if(nodes[i].getAttribute("selected"))
                    
                    if(nodes[i].selected){
                        document.getElementById("rightSelect").appendChild(nodes[i]);
                    }
                }
            }
        }
        
        //<input type="button" id="allToRight" value=">>"/><br/>
        document.getElementById("allToRight").onclick=function(){
            var leftSelectNode = document.getElementById("leftSelect");
            var nodes = leftSelectNode.childNodes;
            var nodesLength = nodes.length;
            for(var i=nodesLength-1;i>=0;i--){//JS中的数组是可变数组
                if(nodes[i].nodeType==1){
                    document.getElementById("rightSelect").appendChild(nodes[i]);
                }
            }
        }
        
        //<input type="button" id="toLeft" value="<--"/><br/>
        //<input type="button" id="allToRight" value="<<"/><br/>
    
    }
</script>
</head>
<body>
    <table width="438">
        <tr>
            <td>
                <select id="leftSelect" size="7">
                    <option value="BJ">北京</option>
                    <option value="SD">山东</option>
                    <option value="HB">湖北</option>
                    <option value="GD">广东</option>
                    <option value="SX">山西</option>
                    <option value="XJ">新疆</option>
                </select>
            </td>
            <td>
                <input type="button" id="toRight" value="-->"/><br/>
                <input type="button" id="allToRight" value=">>"/><br/>
                <input type="button" id="toLeft" value="<--"/><br/>
                <input type="button" id="allToRight" value="<<"/><br/>
            </td>
            <td>
                <select id="rightSelect" size="7">
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

注意：
只有IE8可以获得nodes[i].getAttribute("selected")的值,建议改为:nodes[i].selected
http://www.flyne.org/article/420
https://www.cnblogs.com/snandy/archive/2011/09/01/2162088.html

实例11：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    //HTML DOM
    //添加一项：<option value="TJ">胎教</option>
    window.onload=function(){
        document.getElementById("bt1").onclick=function(){
            var op = new Option("胎教","TJ");
            document.getElementById("edu").add(op);
        }
    }
</script>
</head>
<body>
    <select id="edu" name="edu">
        <option value="BS">博士</option>
        <option value="SS">硕士</option>
        <option value="BK">本科</option>
        <option value="ZK">专科</option>
        <option value="GZ">高中</option>
        <option value="CZ">初中</option>
        <option value="XX">小学</option>
    </select>
    <input type="button" id="bt1" value="添加"/>
</body>
</html>

实例12：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    window.onload=function(){
        document.getElementById("bt1").onclick=function(){
            
            var nameValue = document.getElementById("name").value;
            var emailValue = document.getElementById("email").value;
            var ageValue = document.getElementById("age").value;
            
            var rowsNum = document.getElementById("t1").rows.length;//表中的行数
            var newRow = document.getElementById("t1").insertRow(rowsNum);//插入的新行
            newRow.innerHTML="<td>"+nameValue+"</td><td>"+emailValue+"</td><td>"+ageValue+"</td><td><input type='button' value='删除' onclick='del(this)'/></td>";
        }
    }
    
    function del(obj){
        var trParent = obj.parentNode.parentNode.parentNode;
        trParent.removeChild(obj.parentNode.parentNode);
    }
</script>
</head>
<body>
    姓名：<input type="text" id="name" name="name"/>
    邮箱：<input type="text" id="email" name="email"/>
    年龄：<input type="text" id="age" name="age"/><br/>
    <input type="button" id="bt1" value="添加"/>
    <hr/>
    <table id="t1" border="1" width="438">
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>陈冠希</td>
            <td>cgx@itheima.com</td>
            <td>28</td>
            <td>
                <input type="button" value="删除" onclick="del(this)"/>
            </td>
        </tr>
    </table>
</body>
</html>

注意：
Eclipse技巧：
点击文件，右键，Compare With——Local history找到历史记录。

实例13：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
    //HTML DOM
    window.onload=function(){
        document.getElementById("toRight").onclick=function(){
            var leftSelectNode = document.getElementById("leftSelect");
            var index = leftSelectNode.selectedIndex;//当前选中的option的索引
            document.getElementById("rightSelect").add(leftSelectNode.options[index]);
        }
        document.getElementById("allToRight").onclick=function(){
            var leftSelectNode = document.getElementById("leftSelect");
            var options = leftSelectNode.options;//所有的选项
            var opLength = options.length;
            for(var i=0;i<opLength;i++){//控制次数
                document.getElementById("rightSelect").add(options[0]);
            }
        }

        //<input type="button" id="toLeft" value="<--"/><br/>
        //<input type="button" id="allToRight" value="<<"/><br/>        
    }
</script>
</head>
<body>
    <table width="438">
        <tr>
            <td>
                <select id="leftSelect" size="7">
                    <option value="BJ">北京</option>
                    <option value="SD">山东</option>
                    <option value="HB">湖北</option>
                    <option value="GD">广东</option>
                    <option value="SX">山西</option>
                    <option value="XJ">新疆</option>
                </select>
            </td>
            <td>
                <input type="button" id="toRight" value="-->"/><br/>
                <input type="button" id="allToRight" value=">>"/><br/>
                <input type="button" id="toLeft" value="<--"/><br/>
                <input type="button" id="allToRight" value="<<"/><br/>
            </td>
            <td>
                <select id="rightSelect" size="7">
                </select>
            </td>
        </tr>
    </table>
</body>
</html>