JS中使用DOM来控制HTML元素


Posted in Javascript onJuly 31, 2016

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():访问父节点。

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

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

结果:弹出提示框:DIV.

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

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("div");
              element.className = "message";
              var textNode = document.createTextNode("Hello world!");
              element.appendChild(textNode);
              document.body.appendChild(element);
        }
      createNode();
   </script>

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

结果:页面显示hello world。

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

9.insertBefore():插入节点。

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

 例

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

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

                         p元素

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

10.removeChild():删除节点。

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

 例

<div id="div">
          <p id="pid">p元素</p>
    </div>
    <script>
       function removeNode(){
               var div=document.getElementById("div");
               var p=div.removeChild(div.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元素

这篇文章主要介绍了JS DOM 来控制HTML元素,文章内容主要包括关于DOM,HTML等,文章来自网络,请参考。

Javascript 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
使用impress.js制作幻灯片
Sep 09 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
Jun 03 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
Aug 02 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 #Javascript
JavaScript数据类型转换的注意事项
Jul 31 #Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 #Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 #Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 #Javascript
Javascript中级语法快速入手
Jul 30 #Javascript
AngularJS ng-blur 指令详解及简单实例
Jul 30 #Javascript
You might like
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
window.showModalDialog()返回值的学习心得总结
2014/01/07 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
Javascript数组Array基础介绍
2016/03/13 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JS代码实现百度地图 画圆 删除标注
2016/10/12 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
使用react render props实现倒计时的示例代码
2018/12/06 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
详解Django框架中的视图级缓存
2015/07/23 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Django admin美化插件suit使用示例
2017/12/12 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python实现网站微信登录的示例代码
2019/09/18 Python
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
医药工作岗位求职信分享
2013/12/31 职场文书
消防安全责任书范本
2014/04/15 职场文书
导师评语大全
2014/04/26 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
北京故宫导游词
2015/01/31 职场文书
消费者理赔投诉书
2015/07/02 职场文书
nginx安装以及配置的详细过程记录
2021/09/15 Servers
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle