【DOM】（2）对于dom树中的增删改查---查

最新推荐文章于 2022-09-17 15:01:34 发布

YI_DIAN_DIAN

最新推荐文章于 2022-09-17 15:01:34 发布

阅读量373

点赞数

分类专栏： ❸JavaEE ---- ----④DHTML

本文链接：https://blog.csdn.net/qq_35415600/article/details/71702999

版权

❸JavaEE 同时被 2 个专栏收录

46 篇文章 3 订阅

订阅专栏

---- ----④DHTML

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM模型演示---增删改查中的查询</title>
    </head>
    <body>
    <!--
    查询节点类别1(level0);
    1)通过getElementById()---通过标签的Id属性
    2)通过getElementsByName()---通过标签的name属性
    3)通过getElementsByTagName()---通过标签名称
    4)通过getElementsByClassName()---通过标签的class属性
     -->
    <input type="button" value="演示节点的查询1" onclick="demo();"><br/>
    <div id="div1">湖南城市学院</div>
    <script type="text/javascript">
        //1)通过getElementById()---通过标签的Id属性
        function demo(){
            var oDiv= document.getElementById("div1");//----获取对 ID 标签属性为指定值的第一个对象的引用。
            //(1): 【innerText】 设置或获取位于对象起始和结束标签内的文本。 
            oDiv.innerText="城院很好";  //设置标签内的文本
            alert(oDiv.innerText);              //获取标签内的文本
            //(2): 【innerHTML】 设置或获取位于对象起始和结束标签内的 HTML。
            oDiv.innerHTML="<font size=20 color=‘#ff00ff’>湖南城市学院</font>";//设置标签内的文本
            alert(oDiv.innerHTML);          //获取标签内的文本
        }
    </script>

    <input type="button" value="演示节点的查询2" onclick="demo2();"><br/>
    <input type="text" name="userName" value="请输入姓名"><br/>
    <script type="text/javascript">
        //2)通过getElementsByName()---通过标签的name属性---返回的是一个数组
        function demo2(){
            var oInputNames=document.getElementsByName("userName");//----根据 NAME 标签属性的值获取对象的集合。
            alert(oInputNames[0].value);  //读值
            oInputNames[0].value="def456"; //写值
            document.getElementsByName("userName")[0].value="OKOK";//直接写值
        }
    </script>   

    <input type="button" value="演示节点的查询3" onclick="demo3();"><br/>
    <input type="text" value="pwd"><br>
    <script type="text/javascript">
        //3)通过getElementsByTagName()---通过标签名称
        function demo3(){
            document.getElementsByTagName("INPUT")[4].value="abc123";//----获取基于指定元素名称的对象集合。
        }
    </script>   

    <input type="button" value="演示节点的查询4" onclick="demo4();"><br/>
    <input type="text" name="code" class ="aa"><br/>
    <script type="text/javascript">
        //4)通过getElementsByClassName()---通过标签的class属性
        function demo4(){
            document.getElementsByClassName("aa")[0].value="112233aabbcc";
        }
    </script>

    <!--
        1、通过普通元素(标签节点)，在它的子孙节点中进行level0查询即用：
        getElementById()，getElementsByName()，getElementsByTagName()，getElementsByClassName()等方法
    -->
    <br/><br/><br/>
    友情链接：<br/>
    <a href="http://www.hncu.net">城院首页</a> &nbsp; &nbsp;
    <a href="http://www.sina.com">新浪首页</a><br/>

    商品展示：<br/>
    <div id="goods">
        <a href="goods/1.html">商品1</a> &nbsp;&nbsp;&nbsp;
        <a href="goods/2.html">商品2</a> &nbsp;&nbsp;&nbsp;
        <a href="goods/3.html">商品3</a> &nbsp;&nbsp;&nbsp;
    </div>

    <input type="button" value="演示节点的查询并设置用新窗口 打开商品展示" onclick="demo5();">
    <script type="text/javascript">
        function demo5(){
            var oDivGoods=document.getElementById("goods");
            var oAs=oDivGoods.getElementsByTagName("a");//在oDivGoods节点的子孙节点中进行level0查询
            for(var i=0;i<oAs.length;i++){
                oAs[i].target="_blank";
            }
        }   
    </script>
    </body>
</html>