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

来源：互联网发布：国史大纲版本知乎编辑：程序博客网时间：2024/06/07 09:01
<!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>
0 0