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 相关文章推荐
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
js实现选项卡效果
Mar 07 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
Javascript中数组sort和reverse用法分析
2014/12/30 Javascript
jquery衣服颜色选取插件效果代码分享
2015/08/28 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
会计岗位职责
2013/11/08 职场文书
开工庆典邀请函范文
2014/01/16 职场文书
校长先进事迹材料
2014/02/01 职场文书
会计毕业生自荐书
2014/06/12 职场文书
销售团队获奖感言
2014/08/14 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
居住证明范文
2015/06/17 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书
win11开机发生死循环重启怎么办?win11开机发生死循环重启解决方法
2022/08/05 数码科技