最新公告
  • 欢迎您访问爱上源码网,分享精品整站源码,网站模板,游戏源码,APP小程序源码以及视频教程免费下载;服务永无止境!立即加入我们
  • 如何使用JS中DOM来控制HTML元素

    这篇文章主要介绍了JS中使用DOM来控制HTML元素的相关资料,需要的朋友可以参考下

    1.getElementsByName():获取name.

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`

    例:

    <p name="pn">hello</p>
       <p name="pn">hello</p>
       <p name="pn">hello</p>
       <script>
           function getName(){
                      var count=document.getElementsByName("pn");
                      alert(count.length);
                      var p=count[2];
                      p.innerHTML="world";
              }
       </script>

    结果:界面打印出三个hello,并且伴有一个提示框“3”,当点击确定后,界面显示的内容变为hello hello world

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~··

    2.getElementsByTagName():获取元素。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    <p>hello</p>
       <p>hello</p>
       <p>hello</p>
       <script>
           function getName(){
                      var count=document.getElementsByTagName("p");
                      alert(count.length);
                      var p=count[2];
                      p.innerHTML="world";
              }
       </script>

    结果:界面打印出三个hello,并且伴有一个提示框“3”,当点击确定后,界面显示的内容变为hello hello world

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    3.getAttribute():获取元素属性。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    <a id="aid" title="得到a的标签属性"></a>
       <script>
               function getAttr1(){
                   var anode=document.getElementById("aid");
                   var attr=anode.getAttribute("id");
                   alert("a的ID是:"+attr);
                }
               function getAttr2(){
                  var anode=document.getElementById("aid");
                  var attr=anode.getAttribute("title");
                  alert("a的title内容是:"+attr);
               }
                getAttr1();
                getAttr2();
      </script>

    结果:弹出提示框“a的ID是:aid”.点击确定后,弹出提示框“a的title内容是:得到a的标签属性”。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    4.setAttribute()设置元素属性。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    <a id="aid2">aid2</a> 
       <script>
            function setAttr(){
               var anode=document.getElementById("aid2");
               anode.setAttribute("title","动态设置a的title属性");
               var attr=anode.getAttribute("title");
               alert("动态设置的title值为:"+attr);
           }
           setAttr();
       </script>

    结果:弹出提示框“动态设置的title值为:动态设置a的title属性”。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    5.childNodes():访问子节点。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~··

    <ul><li>1</li><li>2</li><li>3</li></ul>
       <script>
               function getChildNode(){
                    var childnode=document.getElementsByTagName("ul")[0].childNodes;
                    alert(childnode.length);
                    alert(childnode[0].nodeType);
               }
              getChildNode();
      </script>

    结果:界面打印出.1 .2 .3弹出对话框“3”,按确定后弹出“1”。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    6.parentNode():访问父节点。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

    <p>
            <p id="pid"></p>
       </p>
       <script>
            function getParentNode(){
                var p=document.getElementById("pid");
                alert(p.parentNode.nodeName);
            }
           getParentNode();
      </script>

    结果:弹出提示框:p.

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    7.createElement():创建元素节点。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    例:

     <script>
           function createNode(){
                 var body=document.body;
                 var input=document.createElement("input");
                 input.type="button";
                 input.value="按钮";
                 body.appendChild(input);//插入节点
            }
             createNode();
     </script>

    结果:出现一个按钮。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

    8.createTextNode():创建文本节点。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    例:

        <script>
            function createNode(){
                  var element = document.createElement("p");
                  element.className = "message";
                  var textNode = document.createTextNode("Hello world!");
                  element.appendChild(textNode);
                  document.body.appendChild(element);
            }
          createNode();
       </script>

    代码分析:这个例子创建了一个新<p>元素并为它指定了值为“message”的class特性。然后,又创建了一个文本节点,并将其添加到前面创建的元素中。最后一步,就是将这个元素添加到了文档中的<body>元素中,这样可以在浏览器中看到新创建的元素和文本节点了。

    结果:页面显示hello world。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    9.insertBefore():插入节点。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    <p id="p">
              <p id="pid">p元素</p>
        </p>
        <script>
            function addNode(){
                 var p=document.getElementById("p");
                 var node=document.getElementById("pid");
                 var newnode=document.createElement("p");
                 newnode.innerHTML="动态插入一个p元素";
                 p.insertBefore(newnode,node);
            }
            addNode();
        </script>

    结果:界面打印出:动态插入一个p元素

    p元素

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    10.removeChild():删除节点。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~·

    <p id="p">
              <p id="pid">p元素</p>
        </p>
        <script>
           function removeNode(){
                   var p=document.getElementById("p");
                   var p=p.removeChild(p.childNodes[1]);
            }
          removeNode();
       </script>

    结果:界面什么也没显示。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    11.offsetHeight:网页尺寸

    12.scrollHeight:网页尺寸

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~·

    例:

      <script>
          function getSize(){
              var width=document.documentElement.offsetWidth||document.body.offsetWidth;//解决兼容问题
              var height=document.documentElement.offsetHeight||document.body.offsetHeight;
              alert(width+","+height);
          }
          getSize();
     </script>

    显示结果:

    爱上源码网文章如何使用JS中DOM来控制HTML元素的内容插图

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    如何在html中显示JSON数据

    以上就是如何使用JS中DOM来控制HTML元素的详细内容,更多请关注爱上源码网其它相关文章!

  • 微信
  • 分享
  • 相关标签:dom对象转换html元素 html dom元素组成 html dom元素
  • 本文原创发布爱上源码网,转载请注明出处,感谢您的尊重!
    • 上一篇:如何在html中显示JSON数据
    • 下一篇:如何利用js拼接html字符串

    相关文章

    相关视频

    • 奇妙的 CSS shapes(CSS图形)
    • IE、火狐、谷歌浏览器下兼容统一select样式
    • 神奇的 conic-gradient 圆锥渐变
    • 利用html实现一个三级菜单
    • 如何使用JS中DOM来控制HTML元素
    • HTML基础认知
    • HTML简介
    • HTML 简介
    • HTML 编辑器
    • HTML 编辑器

    本文有爱上源码下载完入驻作者发布,如果对您版权造成侵害,可以联系本站站长管理进行维权删除,本站收到维权24小时内进行处理,谢谢您关注23ym.cn!
    本站分享大量程序员技术文章以及对编程开发的初级入门教程,包括图文讲解笔记和高清视频下载~

    重要声明:
    1.本站视频教程,软件及网站源码版权均属于原作者所有,您必须在下载后的24个小时之内,从您的电脑中删除!非法商业用途,后果自负!
    2.本站不保证所提供下载资源的安全性和完整性,仅供下载学习之用!如链接失效或资源含外站广告,请联系客服处理!给予奖励!
    3.本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!本站提供有偿服务!如有侵权请联系在线客服!
    4.如您手中有优质资源或教程,可以自助投稿发布,成功分享后有奖励和额外收入!
    5.如您需要正版微擎模块可联系本站客服,我们有价值30w+商业微擎应用出售微擎坑位和招收代理!
    6.400电话/软著/ICP,EDI许可证/商标特价办理中!
    爱上源码下载网 » 如何使用JS中DOM来控制HTML元素

    常见问题FAQ

    从网站下载的源码都有安装教程么?不会安装怎么办?
    本站发布的网站源码和模板资源大部分在压缩包内都有教程,如您不会安装可以联系本站在线技术进行付费安装。
    爱上源码的所有源码都是亲测能正常运行的么?
    本站目前拥有资源10w+,包含整站源码,网站模板,游戏源码,小程序源码,视频教程,破解软件等,每天也在测试更新;因时间和精力有限我们无法对资源进行一一测试,只能保证所分享资源内容无误,希望理解。
    我手中的优质资源可以在你这换钱或者VIP么?
    爱上源码支持投稿,欢迎发布您手中的优质资源进行售卖;本站VIP支持免费获取,目前邀请10人注册爱上源码即可免费获取VIP。
    爱上源码除了资源分享还有其他业务没?
    【价值30W+微擎模块出售正版商业微擎坑位及招收代理,详情咨询本站客服!】我们团队目前运营并推广几套商业化saas智能小程序系统能满足大部分小程序开发需求,并由SaaS和独立部署版商城小程序系统;另外销售400电话,各种ICP/EDI资质证书办理,软著和商标注册服务等。

    发表评论

    • 28会员总数(位)
    • 35644资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 543稳定运行(天)

    提供最优质的资源集合

    开通VIP 源码下载