jsDom基本操作

最新推荐文章于 2023-10-04 16:46:11 发布

name_zj

最新推荐文章于 2023-10-04 16:46:11 发布

阅读量1.6k

点赞数 3

文章标签： jsDom

本文链接：https://blog.csdn.net/King_crazy/article/details/77899893

版权

jsDom基本方法
1.getElementById();（通过属性名Id获取)
示例：

<html>
  <head>
    <title>01-getElementById.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
  </head>

  <body>
    <form name="form1" action="test.html" method="post">
        <input type="text" name="username" value="文字内容" id="tid" onchange=""/>
        <input type="button" name="OK" value="保存"/>
    </form>
  </body>

  <script type="text/javascript">
    //输出<input type="text" name="username" value="文字内容" id="tid"/> 标签的value属性的值
    var inputNode = document.getElementById("tid");
    //alert(inputNode.value);

    //输出<input type="text" name="username" value="文字内容" id="tid"/>标签type属性的值
    alert(inputNode.type);

  </script>
</html>

注：
1、在method中，可选择参数为get、post,用get提交方式提交给浏览器时，在地址栏中会把所传的所有的值显示出来，不利于保密，而用post的话，不会显示所传的值，安全性较高。
2、onchange()方法中，当input捕获到焦点后，系统储存当前值，input焦点离开后，判断当前值与之前存储的值是否不等，如果为true则触发onchange事件，例如：
<input type="text" onchange="console.log(this.value);" />
这个事件要做的动作很简单，只是把input的值在控制台上打印。
特别注意：非IE可以回车触发，即当input获取焦点后，不仅是焦点离开时会去校验当前的值与获取焦点临时存储值是否一致，还会在敲回车时进行验证。

2、getElementByTagName()(通过标签名获取）
示例：

<html>
  <head>
    <title>02-getElementsByTagName.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
  </head>

  <body>
    <form name="form" action="test.html" method="post">
        <input type="text" name="tname" value="内容一" id="tid-1"><br>
        <input type="text" name="tname" value="内容二" id="tid-2"><br>
        <input type="text" name="tname" value="内容三" id="tid-3"><br>
        <input type="button" name="ok" value="保存"/>
    </form>

    <select name="edu" id="edu">
        <option value="硕士">硕士---</option>
        <option value="研究生">研究生---</option>
        <option value="大学" selected="selected">大学---</option>
        <option value="高中">高中---</option>
    </select>

    <select name="job" id="job">
        <option value="教师">教师---</option>
        <option value="会计">会计---</option>
        <option value="程序员" selected="selected">程序员---</option>
        <option value="建筑师">建筑师---</option>
    </select>    

    <br/>
    <input id="btn" type="button" value="输出selected被选中的值"/>
  </body>

  <script type="text/javascript">
    //输出表单中type="text"中value属性的值，不包括(button)
    /* var inputNodes = document.getElementsByTagName("input");
    for(var i=0;i<inputNodes.length;i++){
        if(inputNodes[i].type != "button"){ 
            alert(inputNodes[i].value);
        }
    } */

    //输出所有下拉选id="edu"中option标签中value属性的值
  /*    var eduNode = document.getElementById("edu");
    var optionNodes = eduNode.getElementsByTagName("option");
    for(var i=0;i<optionNodes.length;i++){
        alert(optionNodes[i].value);
    } */

    //输出下拉框中被选中的值
    document.getElementById("btn").onclick = function(){    
        var option = document.getElementsByTagName("option");
        for(var i=0;i<option.length;i++){
            if(option[i].selected){
                alert(option[i].value);
            }
        }
    };
  </script>
</html>

3、getElementByName()(通过属性名name获取)
示例：

<html>
  <head>
    <title>03-getElementsByName.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
  </head>

  <body>
    <form name="form" action="test.html" method="post">
        <input type="text" name="tname" value="内容一" id="tid-1"><br>
        <input type="text" name="tname" value="内容二" id="tid-1"><br>
        <input type="text" name="tname" value="内容三" id="tid-1"><br>
        <input type="button" name="ok" value="保存"/>
    </form>
  </body>

  <script type="text/javascript">
    //通过元素的name属性获取所有元素的引用name="tname"的节点对象
    var inputNodes = document.getElementsByName("tname");
    //遍历元素，输出所有value属性的值
    for(var i=0;i<inputNodes.length;i++){
        alert(inputNodes[i].value);
    }
  </script>
</html>

4、Attribute()
示例：

<html>
  <head>
    <title>查找属性节点</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
  </head>

  <body>
        你喜欢的城市：<br>
        <ul>
            <li id="gl" value="guilin">桂林</li>
            <li id="sz" value="shenzhen">深圳</li>
            <li id="zj" value="zhejiang">浙江</li>            
        </ul>

        你喜欢的运动：<br>
        <ul>
            <li id="zq" value="zuqiu">足球</li>
            <li id="ymq" value="yumaoqiu">羽毛球</li>
            <li id="lq" value="lanqiu">蓝球</li>
            <li id="ppq" value="pingpangqiu">乒乓球</li>
        </ul>
  </body>
  <script type="text/javascript">
    //<li id="ymq" value="zuqiu">羽毛球</li>节点的value属性的值
    /* var ymqNode = document.getElementById("ymq");
    //alert(ymqNode.value);     //这种方式不行
    alert(ymqNode.getAttribute("value")); */

    //为<li id="ppq" value="pingpangqiu">乒乓球</li>添加discription属性pingpang
    var ppNode = document.getElementById("ppq");
    ppNode.setAttribute("discription","pingpang");
    alert(ppNode.getAttribute("discription"));

  </script>
</html>

注：
1.ul 中的li定义的value会自动转换为int.数值，ie 浏览器下大于int最大值，显示int最大值，其他浏览器显示为0。（参考：http://hw1287789687.iteye.com/blog/2261455)

5、createElement()
示例：

<html>
  <head>
    <title>05-createElement.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
 </head>

  <body>
    你喜欢的城市：<br>
        <ul id="city">
            <li id="gl" value="guilin">桂林</li>
            <li id="sz" value="shenzhen">深圳</li>
            <li id="zj" value="zhejiang">浙江</li>            
        </ul>

        你喜欢的运动：<br>
        <ul>
            <li id="zq" value="zuqiu">足球</li>
            <li id="ymq" value="yumaoqiu">羽毛球</li>
            <li id="lq" value="lanqiu">蓝球</li>
            <li id="ppq" value="pingpangqiu">乒乓球</li>
        </ul>
  </body>

  <script type="text/javascript">

    //增加城市节点<li id="tj" value="tianjin">天津</li>放置在city下
    var liNode = document.createElement("li");  //<li></li>
    liNode.setAttribute("id","tj");             //<li id="tj"></li>
    liNode.setAttribute("value","tianjin");     //<li id="tj" value="tianjin"></li>
    liNode.innerHTML = "天津"                     //<li id="tj" value="tianjin">天津</li>

    var cityNode = document.getElementById("city");
    cityNode.appendChild(liNode);

  </script>
</html>

6、insertBefore()
示例：

<html>
  <head>
    <title>06-insertBefore.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
  </head>

  <body>
     你喜欢的城市：<br>
        <ul>
            <li id="gl" value="guilin">桂林</li>
            <li id="sz" value="shenzhen">深圳</li>
            <li id="zj" value="zhejiang">浙江</li>            
        </ul>
  </body>

  <script type="text/javascript">

    //增加城市节点<li id="tj" value="tianjin">天津</li>放置在浙江上方
    var liNode = document.createElement("li");  //<li></li>
    liNode.setAttribute("id","tj");             //<li id="tj"></li>
    liNode.setAttribute("value","tianjin");     //<li id="tj" value="tianjin"></li>
    liNode.innerHTML = "天津";                    //<li id="tj" value="tianjin">天津</li>

    //获取父节点
    var ulNode = document.getElementsByTagName("ul")[0];

    //获取目标节点
    var zjNode = document.getElementById("zj");

    ulNode.insertBefore(liNode,zjNode);
  </script>
</html>

7、removeChild()
示例：

<html>
  <head>
    <title>06-insertBefore.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
  </head>

  <body>
     你喜欢的城市：<br>
        <ul id="city">
            <li id="gl" value="guilin">桂林</li>
            <li id="sz" value="shenzhen">深圳</li>
            <li id="zj" value="zhejiang">浙江</li>            
        </ul>
  </body>

  <script type="text/javascript">

    //删除城市节点<li id="zj" value="zhejiang">浙江</li>

    //获取父节点
    var cityNode = document.getElementsById("city");

    //获取目标节点
    var zjNode = document.getElementById("zj");

    //删除
    cityNode.removeChild(zjNode);
  </script>
</html>

8、InnerHTML()
示例：

<html>
  <head>
    <title>08-innerHTML.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GBK">
 </head>

  <body>
    <div id="city">内容一</div>
  </body>

  <script type="text/javascript">

    var cityNode = document.getElementById("city");
    //alert(cityNode.innerHTML);

    //动态更改内容
    cityNode.innerHTML = "更改后的内容二";
  </script>
</html>

name_zj

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
jsDom基本操作

jsDom基本方法 1.getElementById();（通过属性名Id获取) 示例：<html> <head> <title>01-getElementById.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" conte
复制链接

扫一扫