Java进阶学习第四天——DOM入门

最新推荐文章于 2023-04-01 14:58:35 发布

鹿天斐

最新推荐文章于 2023-04-01 14:58:35 发布

阅读量4.7k

点赞数 1

分类专栏： Java Java进阶文章标签： Java进阶 DOM Node innerHTML 经典面试题

本文链接：https://blog.csdn.net/lutianfeiml/article/details/51153651

版权

Java 同时被 2 个专栏收录

74 篇文章 2 订阅

订阅专栏

Java进阶

41 篇文章 1 订阅

订阅专栏

文档版本	开发工具	测试平台	工程名字	日期	作者	备注
V1.0				2016.04.14	lutianfei	none

DOM 文档对象模型

文档：标记型文档（HTML/XML）
对象：封装了属性和行为的实例，可以直接被调用。
模型：所有的标记型文档都具有一些共性特征的一个体现。

DOM解析HTML

通过DOM的方法，把HTML全部元素（标签、文本、属性）都封装成了对象。
- <span id="spanId">文本</span>
  - span 标签
  - id 属性
  - 文本
DOM想要操作标记型文档必须先解析。（解析器）

DOM结构模型

* 注：Node节点代表以上4种对象。

DOM的三个级别

DOM level 1：将html文档封装成对象。
DOM level 2：在level 1的基础上添加新的功能，例如：对于事件和css样式的支持。
DOM level 3：支持xml1.0的一些新特性。

DHTML

DHTML:动态的HTML，它不是一门语言，是多项技术综合体的简称。
- 包括html，css，dom，javascript。
这四种语言的职责：
Html：负责提供标签，封装数据，这样便于操作数据。
Css：负责提供样式，对标签中的数据进行样式定义。
Dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为。
Javascript：负责提供程序设计语言，对页面中的对象进行逻辑操作。

BOM和HTML DOM的关系图

NODE 接口的特性和方法

Document 对象

Document常用方法

getElementById(“id的值”); 通过元素的id的属性获取元素（标签）对象。
getElementsByName(“name属性值”); 通过名称获取元素对象的集合（返回数组）
getElementsByTagName(“标签名称”); 通过标签名称获取元素对象的集合（返回数组）
write(“文本的内容（html的标签）”); 把文本内容写到浏览器上。

<body>

    <input type="text" id="nameId" value="zhangsan"/><br/>
    <input type="text" name="username" value="zhaosi"/><br/>
    <input type="text" name="username" value="wangwu"/><br/>
    <input type="text" name="username" value="ermazi"/><br/>

</body>

<script type="text/javascript">

var input = document.getElementById("nameId");
//alert(input.value);

var inputs = document.getElementsByName("username");
// alert(inputs.length);
for(var i=0;i<inputs.length;i++){
    var input1 = inputs[i];
    // alert(input1.value);
}

var inputs2 = document.getElementsByTagName("input");
// alert(inputs2.length);

</script>

添加标签练习
- createElement(“元素名称”); 创建元素对象
- createTextNode(“文本内容”) 创建文本对象
- appendChild(“子节点”) 添加子节点

<body>

    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>

</body>
    <script type="text/javascript">
        /* 
            需求：在ul无序列表下，添加一个子节点。<li>深圳</li>
        */

        // 创建元素对象
        var li = document.createElement("li");
        // 创建文本的对象
        var text = document.createTextNode("深圳");
        // 把文本对象添加到元素对象下面，作为子节点
        li.appendChild(text);
        // 获取ul
        var ul = document.getElementsByTagName("ul")[0];
        // 把元素对象添加ul的下面，作为子节点
        ul.appendChild(li);
    </script>

Element对象

获取元素对象
- getAttribute(“属性名称”); 获取属性的值
- setAttribute(“属性名称”,”属性的值”); 设置或者修改属性的值
- removeAttribute(“属性名称”); 删除属性
- 获取元素下的所有子节点（重点）在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合
  - ul.getElementsByTagName();

<body>

    <input type="text" id="nameId" value="zhangsan" />

    <ul id="ulId">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
    </ul>

</body>

<script type="text/javascript">
        var input = document.getElementById("nameId");
        // alert(input.value);
        // alert(input.getAttribute("value"));

        // 修改
        //input.setAttribute("value", "zhaosi");
        //alert(input.getAttribute("value"));

        input.removeAttribute("value");
        //alert(input.getAttribute("value"));

        // ============================================================================
        var ul = document.getElementById("ulId");
        var lis = ul.childNodes; //获取的元素中包含了空格
        // alert(lis.length);

        var lis2 = ul.getElementsByTagName("li");
        alert(lis2.length);

    </script>

Node节点

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

节点类型	编号	说明
Node.ELEMENT_NODE	1	元素节点
Node.ATTRIBUTE_NODE	2	属性节点
Node.TEXT_NODE	3	文本节点

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

父节点、子节点和同辈节点

父节点： parentNode
- parentNode 属性返回的节点永远是一个元素节点，因为只有元素节点才有可能包含子节点。
- document 节点的没有父节点。
子节点
- childNodes：获取指定节点的所有子节点集合。(含空格)
- firstChild：获取指定节点的第一个子节点。
- lastChild：获取指定节点的最后一个子节点。
同辈节点
nextSibling: 返回一个给定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。

IE6-8	IE9-11 Chrome FireFox
firstChild 第一个节点	firstElementChild?第一个节点
lastChild最后一个节点	lastElementChild 最后一个节点
nextSibling 下一同级节点	nextElementSibling下一同级节点
previousSibling 上一同级节点	previousElementSibling?上一同级节点

`ul` 与 `span`在使用Node节点时的注意事项

如果通过ul获取子节点时，必须使用ul.firstElementChild;
- 但是如果IE6-8，需要使用firstChild;
使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）

节点属性

节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点（特别是元素节点）的属性。
事实上，attributes中包含的是一个节点的所有属性的集合。
attributes.getNameItem()和Element对象的getAttribute()方法类似。

检测子节点和属性

查看是否存在子节点： hasChildNodes()
查看是否存在属性：hasAttributes()
即使节点中没有定义属性，其attributes属性仍然有效的，而且长度值为0。同样节点中的childNodes属性也是如此。
当你想知道某个节点是否包含子节点和属性时，可以使用hasChildNodes()和hasAttributes()方法。但是，如果还想知道该节点中包含多少子节点和属性的话，仍要使用attributes和childNodes属性。
在IE浏览器中，不存在hasAttributes()方法！

操作 DOM 节点树

插入节点
- appendChild()方法: 父节点调用，在末尾添加子节点
- insertBefore(new,old)方法: 父节点调用，在指定节点之前添加子节点
  - 没有insertAfter()方法
删除节点：removeChild():父节点调用,删除节点
替换节点：replaceChild(new,old): 父节点调用，替换节点
复制节点：cloneNode(boolean) 不是父节点调用,其中，参数boolean是判断是否复制子节点。默认是false
移动节点：由以下三种方法组合完成
查找节点
- getElementById()：通过节点的id属性，查找对应节点。
- getElementsByName()：通过节点的name属性，查找对应节点。
- getElementsByTagName()：通过节点名称，查找对应节点。

Node节点方法小结

parentNode 获取父节点
childNodes 所有子节点
firstChild 第一个子节点
lastChild 最后一个子节点
nextSibling 下一个兄弟节点
previousSibling 上一个兄弟节点
appendChild(node) 父节点调用，在末尾添加子节点
insertBefore(new,old) 父节点调用，在指定节点之前添加子节点
replaceChild(new,old) 父节点调用，替换节点
removeChild(node) 父节点调用,删除节点
cloneNode(boolean) 不是父节点调用,复制节点
- boolean ：
  - 如果是true，复制子节点
  - 如果是false，不复制子节点，默认是false
练习：

<body>

    <input type="text" id="nameId" value="zhangsan" />

    <span id="spanId">
        我是span的区域
    </span>


    <ul>
        <li>北京</li>
        <li id="sh">上海</li>
        <li>广州</li>
    </ul>
    <ul>
        <li>小时代1</li>
        <li id="xsd2">小时代2</li>
        <li>小时代3</li>
    </ul>

    <hr/>

    <button id="btnId">
        我是按钮
    </button>

    <span id="spanId2"></span>

</body>
    <script type="text/javascript">
        /* 

        var input = document.getElementById("nameId");
        //alert(input.nodeName);        // INPUT
        //alert(input.nodeType);        // 1
        //alert(input.nodeValue);        // null

        var attr = input.getAttributeNode("type");
        //alert(attr.nodeName);        // type
        //alert(attr.nodeType);        // 2
        //alert(attr.nodeValue);        // text

        var span = document.getElementById("spanId");
        var text = span.firstChild;
        //alert(text.nodeName);        // #text
        //alert(text.nodeType);        // 3
        //alert(text.nodeValue);        // 我是span的区域

        var ul = document.getElementById("ulId");
        var li = ul.firstElementChild;
        // alert(li.nodeType);        //1

        // 是否包含子节点
        // alert(ul.hasChildNodes());
        // 是否包含属性
        // alert(ul.hasAttributes());


        // 点击上海，用小时代2替换上海
        document.getElementById("sh").onclick = function(){
            // var sh = document.getElementById("sh");
            // var xsd2 = document.getElementById("xsd2");
            // var ul = sh.parentNode;
            // ul.replaceChild(xsd2, sh);

            var ul = this.parentNode;
            var xsd2 = document.getElementById("xsd2");
            ul.replaceChild(xsd2,this);
        };


        // 删除节点
        document.getElementById("sh").onclick = function(){
            // this.parentNode.removeChild(this);
            var sh = document.getElementById("sh");
            var ul = sh.parentNode;
            ul.removeChild(sh);
        };
        */

        // 复制button的按钮，添加到span标签的中间
        var btn = document.getElementById("btnId");
        var newbtn = btn.cloneNode(true);
        var span = document.getElementById("spanId2");
        span.appendChild(newbtn);

    </script>

在浏览器中按`F12`可进行bug调试

innerHTML属性

innerHTML ：获取和设置文本内容。
浏览器几乎都支持该属性，但不是 DOM 标准的组成部分。
innerHTML 属性可以用来读，写某给定元素里的 HTML 内容。
innerHTML 属性多与div或span标签配合使用。

<body>

    <span id="spanId">
        这是span的区域
    </span>

    <span id="spanId2"></span>

    <h3>获取焦点的事件</h3>

    输入姓名：<input type="text" name="username" onfocus="run()" onblur="run2()"/><span id="uspan"></span><br/>
    输入密码：<input type="password" name="password" /><span id="pspan"></span>

</body>
<script type="text/javascript">
        /* 
        var span = document.getElementById("spanId");
        // alert(span.innerHTML);

        var span2 = document.getElementById("spanId2");
        span2.innerHTML = "<font color='red'>这是span的区域2</font>";
        */
        // 提示输入的信息
        function run(){
            var uspan = document.getElementById("uspan");
            uspan.innerHTML = "您只能输入特殊字符";
        }

        // 失去焦点的时候
        // 
        function run2(){
            // 获取用户输入的姓名
            // ajax，把用户输入的姓名，传到后台，在后台做匹配的操作，后台处理完成，返回结果。
            var uspan = document.getElementById("uspan");
            uspan.innerHTML = "用户名已存在";
        }

</script>

JavaScript常用事件

鼠标移动事件
- onmousemove
- onmouseout：鼠标移出某个区域
- onmouseover：鼠标移入某个区域

<html>
     <script language="JavaScript">
        function mouseovertest(){
           document.getElementById("info").value = "鼠标在输入框上";}
        function mouseouttest(){
        document.getElementById("info").value= "鼠标在输入框外";}
     </script>
     <body>
     <input type="text" id="info" onmouseover="mouseovertest();"                     onmouseout="mouseouttest();"/>
     </body>
</html>

鼠标点击事件（重点）
- onclick 单击
- ondblclick 双击
加载与卸载事件（重点）
- onload 加载
- onunload 卸载
聚焦与离焦事件（重点）
- onfocus:获取焦点
- onblur:失去焦点
键盘
- onkeyup:按下抬起

    <input type="text" id="nameId2" onkeyup="run3()" style="width: 200px"/>
    <div id="divId" style="width: 200px;display: none">
        <table>
            <tr>
                <td>java</td>
            </tr>
            <tr>
                <td>js</td>
            </tr>
            <tr>
                <td>jsp</td>
            </tr>
        </table>
    </div>

</body>
    <script type="text/javascript">
        /* 

        */
        function run(){
            var input = document.getElementById("nameId");
            input.style.backgroundColor = "gray";
        }

        function run3(){
            var div = document.getElementById("divId");
            div.style.display = "block";
        }

    </script>

改变事件（重点）
- onchange
控制表单的提交（重点）
onsubmit

经典例题

全选/全不选/反选的练习
- <input type="checkbox" />
  - 指定默认值：checked 只要出现在<input type="checkbox" />,对号就勾上了。

    <script type="text/javascript">
        /* 
            * 思路：
                全选：获取名称是love的所有的input标签
                循环遍历，为了拿到每一个input标签，同时，设置checked
        */
        // 全选
        function selAll(){
            // 获取名称是love的所有的input的标签，返回是数组
            var inputs = document.getElementsByName("love");
            // 为了拿到每一个input标签，同时，设置checked
            for(var i=0;i<inputs.length;i++){
                // 获取每一个input对象
                var input = inputs[i];
                // 设置checked属性
                input.checked = true;
            }
        }

        // 全不选
        function selNo(){
            // 获取名称是love的所有的input标识
            var inputs = document.getElementsByName("love");
            for(var i=0;i<inputs.length;i++){
                var input = inputs[i];
                input.checked = false;
            }
        }

        // 反选
        function selOth(){
            // 获取名称是love的所有的input的标签，返回是数组
            var inputs = document.getElementsByName("love");
            // 为了拿到每一个input标签，同时，设置checked
            for(var i=0;i<inputs.length;i++){
                // 获取每一个input对象
                var input = inputs[i];
                // 判断，当前的input标签的checked属性，是否是为true，如果是true，设置成false，反之。
                /* if(input.checked == true){
                    input.checked = false;
                }else{
                    input.checked = true;
                } */

                input.checked = !input.checked;
            }
        }

        // 全选/全不选
        function selOrNo(){
            // 获取第一个input对象
            var box = document.getElementById("boxId");
            // 判断，判断是否被选中
            if(box.checked == true){
                // 调用全选的方法
                selAll();
            }else{
                selNo();
            }
        }

    </script>

下拉列表左右选择

<style type="text/css">
* { margin:0; padding:0; }
div.centent {
   float:left;
   text-align: center;
   margin: 10px;
}
span {
    display:block;
    margin:2px 2px;
    padding:4px 10px;
    background:#898989;
    cursor:pointer;
    font-size:12px;
    color:white;
}
</style>


</head>
<body>
    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
            <option value="7">选项7</option>
        </select>
        <div>
            <span id="add">选中添加到右边&gt;&gt;</span>
            <span id="add_all" >全部添加到右边&gt;&gt;</span>
        </div>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">选项8</option>
        </select>
        <div>
            <span id="remove">&lt;&lt;选中删除到左边</span>
            <span id="remove_all">&lt;&lt;全部删除到左边</span>
        </div>
    </div>

</body>

<script type="text/javascript">
    /*     
        * 思路：把select1的option（被选中），加入到select中。
            * select标签上有默认值
                * selected== true，说明被中

            * 获取select1下面所有的option对象
                * 先获取select1
                * 再获取select1下所有的子节点

            * 循环遍历，拿到每一个，判断selected属性,如果是true，加入select2中。

        * 双击事件
            * ondblclick
    */

    // 把左边选中的条目添加到右边
    document.getElementById("add").onclick = trunRight;


    // 全不添加到右边
    document.getElementById("add_all").onclick = function(){
        // 获取select2
        var select2 = document.getElementById("select2");
        // 获取select1
        var select1 = document.getElementById("select1");
        // 获取select1下所有的子节点
        var options = select1.getElementsByTagName("option");
        // 循环遍历
        for(var i=0;i<options.length;i++){
            var option = options[i];
            // 添加到select2中去
            select2.appendChild(option);
            i--;
        }
    };

    // 从右边添加到左边
    document.getElementById("remove").onclick = trunLeft;

    // 全不从右边添加到左边
    document.getElementById("remove_all").onclick = function(){
        // 获取select2
        var select2 = document.getElementById("select2");
        // 获取select1
        var select1 = document.getElementById("select1");
        // 获取select2下所有的子节点
        var options = select2.getElementsByTagName("option");
        // 循环遍历
        for(var i=0;i<options.length;i++){
            var option = options[i];
            // 添加到select1中去
            select1.appendChild(option);
            i--;
        }
    };

    document.getElementById("select1").ondblclick = trunRight;

    function trunRight(){
        // 先获取select2节点
        var select2 = document.getElementById("select2");
        // 先获取select1对象
        var select1 = document.getElementById("select1");
        // 获取select1下所有的子节点
        var options = select1.getElementsByTagName("option");
        // 循环遍历，获取每一个
        for(var i=options.length-1;i>=0;i--){
            // 获取每一个option对象
            var option = options[i];
            // 判断当前的option对象是否被选中（看selected是否为true）
            if(option.selected == true){
                // 添加到select2中
                select2.appendChild(option);
                // i--;
            }
        }
    }

    document.getElementById("select2").ondblclick = trunLeft;

    function trunLeft(){
        // 先获取select2节点
        var select2 = document.getElementById("select2");
        // 先获取select1对象
        var select1 = document.getElementById("select1");
        // 获取select2下所有的子节点
        var options = select2.getElementsByTagName("option");
        // 循环遍历，获取每一个
        for(var i=options.length-1;i>=0;i--){
            // 获取每一个option对象
            var option = options[i];
            // 判断当前的option对象是否被选中（看selected是否为true）
            if(option.selected == true){
                // 添加到select1中
                select1.appendChild(option);
                // i--;
            }
        }
    }

</script>
</html>

省市联动

<body>

    <select id="select1" onchange="run(this.value)">
        <option>--请选择--</option>
        <option value="北京">北京</option>
        <option value="河北">河北</option>
        <option value="山东">山东</option>
        <option value="河南">河南</option>
    </select>

    <select id="select2">

    </select>

</body>
    <script type="text/javascript">
        /* 
            * 思路：通过传过来的值，和数组对比，如果匹配成功，获取数组中后面的值（1开始），添加select2中。

                * 事件：改变事件
                    * onchange
                    * 通过改变事件把值传过来
                * 去数组中获取值（获取里面的数组0位置的元素），和传过来的值做对比，如果匹配，获取该数组中后面的值。
                * 添加到select2中。
        */
        var arr = [];
        arr[0] = new Array("北京","海淀区","昌平区","朝阳区","东城区","西城区","丰台区","大兴区","怀柔区");
        arr[1] = new Array("河北","石家庄","保定","邯郸","秦皇岛","张家口","唐山","承德","廊坊");
        arr[2] = new Array("山东","济南","青岛","烟台","威海","潍坊","菏泽","临沂","淄博","济宁","聊城");
        arr[3] = new Array("河南","郑州","洛阳","信阳","安阳","南阳","开封","商丘","驻马店","平顶山");

        function run(val){
            // 获取select2
            var select2 = document.getElementById("select2");
            // 先清除掉select2下所有的子节点
            // 先获取select2下所有的子节点
            var ops = select2.getElementsByTagName("option");
            // 循环遍历
            for(var x=0;x<ops.length;x++){
                // 获取每一个
                var op = ops[x];
                // 删除节点
                select2.removeChild(op);
                x--;
            }

            // alert(val);
            // 获取数组的值
            for(var i=0;i<arr.length;i++){
                var inarr = arr[i];
                // 里面的数组0位置的元素
                var str = inarr[0];
                // alert(str);
                // 判断传过来的值和数组的值是否相等
                if(val == str){
                    // 获取数组后的内容
                    for(var j=1;j<inarr.length;j++){
                        // 除了0位置后的所有元素
                        var instr = inarr[j];
                        // alert(instr);
                        // 添加到select2中
                        // 创建元素对象
                        var option = document.createElement("option");
                        // 创建文本对象
                        var text = document.createTextNode(instr);
                        // 把文本添加到元素的下面
                        option.appendChild(text);
                        // 把元素添加到select2中
                        select2.appendChild(option);
                    }
                }
            }
        }

    </script>

鹿天斐

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Java进阶学习第四天——DOM入门

DOM 文档对象模型DOM解析HTMLDOM结构模型DOM的三个级别DHTMLBOM和HTML DOM的关系图NODE 接口的特性和方法Document 对象Document常用方法Element对象Node节点父节点、子节点和同辈节点ul 与 span在使用Node节点时的注意事项节点属性检测子节点和属性操作 DOM 节点树Node节点方法小结在浏览器中按F12可进行bug调试
复制链接

扫一扫