【笔记】3.0 DOM基础加强

咚咚锵啦啦啦 · 发表于 2018-2-9 11:22

本帖最后由咚咚锵啦啦啦于 2018-2-9 11:26 编辑

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="删除"/>
                                </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="删除"/>
                        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="删除"/>
                        </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="删除"/>
                        </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>

cndgyg · 发表于 2018-2-9 21:34

提示: 作者被禁止或删除内容自动屏蔽

帐号		自动登录	找回密码
密码			注册[Register]

cndgyg cndgyg 当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	cndgyg 发表于 2018-2-9 21:34 提示: 作者被禁止或删除内容自动屏蔽
	【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
	回复支持举报

[其他转载] 【笔记】3.0 DOM基础加强