JS DOM对象控制HTML元素详解

方法：

getElementsByName()  获取name

getElementsByTagName()  获取元素

getAttribute()  获取元素属性

setAttribute()  设置元素属性

childNodes()  访问子节点

parentNode()  访问父节点

createElement()  创建元素节点

createTextNode()  创建文本节点

insertBefore()  插入节点

removeChild()  删除节点

offsetHeight()  网页尺寸

scrollHeight()  网页尺寸

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <p name="pn">hello</p>

         <p name="pn">hello</p>

         <p name="pn">hello</p>

         <p name="pn">hello</p>

         <script>

             function getName(){

                 //var count=document.getElementsByName("pn");  //获取name

                 var count=document.getElementsByTagName("p");  //获取元素

                 alert(count);

                 alert(count.length);//拿到4个p元素

                 var p=count[0];

                 p.innerHTML="World";

             }

             getName();

         </script>

         <a id="aid" title="得到了a标签属性">hello</a>

         <script>

             function getAttr(){

                 var anode=document.getElementById("aid");

                 var attr=anode.getAttribute("title");//获取元素属性，可以把title换成id

                 alert(attr);

             }

             getAttr();

         </script>

         <br />

         <a id="aid2">aid2</a>

         <script>

             function setAttr(){

                 var anode=document.getElementById("aid2");

                 anode.setAttribute("title","动态设置a的tiltle属性");//设置元素属性

                 var attr=anode.getAttribute("title");

                 alert(attr);

             }

             setAttr();

         </script>

         <br>

         <ul>

             <li>1</li>

             <li>2</li>

             <li>3</li>

         </ul>

         <script>

             function getChildNode(){

                 var childnode=document.getElementsByTagName("ul")[0].childNodes;//访问子节点

                 alert(childnode.length);  //答案是7，是因为有空白项

                 alert(childnode[1].nodeType);

             }

             getChildNode();

         </script>

         <br />

         <div id="div">

             <p id="pid">div的p元素</p>

         </div>

         <script>

             function getParentNode(){

                 var div =document.getElementById("pid");

                 alert(div.parentNode.nodeName);   //获取父节点

             }

             getParentNode();

             function createNode(){

                 var body=document.body;

                 var input=document.createElement("input");

                 input.type="button";

                 input.value="创建节点";

                 body.appendChild(input);

             }

             createNode();

             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();

             function removeNode(){

                 var div=document.getElementById("div");

                 var p=div.removeChild(div.childNodes[1]);//删除节点

             }

             removeNode();

             function getSize(){           //网页尺寸

                 var height=document.body.offsetHeight||document.documentElement.offsetHeight;

                 var width=document.body.offsetWidth;

                 alert(width+","+height);

             }

             getSize();

         </script>

     </body>

 </html>

JS DOM对象控制HTML元素详解的更多相关文章

  1. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  2. web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解

    1.方法 getElementsByName() 获取name 可以获取一个数组类型数据(参数加引号) getElementsByTagName() 获取元素   getAttribute() 获取元 ...

  3. 4.8.2.JSDOM对象控制HTML元素详解

    1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title ...

  4. JS DOM 来控制HTML元素

    JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  5. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  6. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  7. jQuery 源码分析(二十) DOM操作模块 插入元素 详解

    jQuery的DOM操作模块封装了DOM模型的insertBefore().appendChild().removeChild().cloneNode().replaceChild()等原生方法.分为 ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  9. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

随机推荐

  1. Linux安装Python虚拟环境virtualenv

    1.安装virtulenv.virtulenvwrapper包 pip install virtualenv virtualenvwrapper 2.virtualenvwrapper是virtual ...

  2. ubantu环境下fidder安装

    转自:http://www.cnblogs.com/jcli/p/4474332.html Linux(Ubuntu)环境下使用Fiddler 自己的开发环境是Ubuntu, 对于很多优秀的软件但是又 ...

  3. 《OpenCL异构并行编程实战》补充笔记散点，第五至十二章

    ▶ 第五章,OpenCL 的并发与执行模型 ● 内存对象与上下文相关而不是与设备相关.设备在不同设备之间的移动如下,如果 kernel 在第二个设备上运行,那么在第一个设备上产生的任何数据结果在第二个 ...

  4. Matlab信号处理工具箱函数

    波形产生和绘图chirp 产生扫描频率余弦diric 产生Dirichlet函数或周期Sinc函数gauspuls 产生高斯调制正弦脉冲pulstran 产生脉冲串rectpuls 产生非周期矩形信号 ...

  5. Robot Framework——百度搜索

     1.创建项目 选择菜单栏file----->new Project 右键点击新建Project,选择new Suite 选项. 右键点击新建测试Suite,选择new Test Case. 完 ...

  6. 彻底禁止win10更新

    关闭win10自动更新: 可以用下面方法关闭: 1.首先在服务界面关闭Windows Update服务并设置为禁用并在恢复界面全部如下图设置为无操作. 2.只关闭了Windows Update服务发现 ...

  7. MySQL GTID （二）

    MySQL GTID 系列之二 三.在线将GTID转化为传统模式 环境见上篇系列文章 关闭GTID,不用停止服务,不影响线上业务 3.1 关闭GTID复制,调整为传统复制 #SLVAE实例上停止复制 ...

  8. 实现JNI的另一种方法：使用RegisterNatives方法传递和使用Java自定义类 (转)

    原帖地址:http://blog.csdn.net/qiuxiaolong007/article/details/7860610 除了使用传统方法实现JNI外,也可以使用RegisterNatives ...

  9. 迷你MVVM框架 avalonjs 0.84发布

    本版本只要做了如下改进 重构ui绑定 fix scanTag bug ms-include 的值必须不为空值,否则不做任何操作.

  10. SpringBoot简单理解

    SpringBoot 一.特点:1.默认大于配置,不需要大量配置文件,没有web.xml,拥有可运行的Application类. 2.一般通过java代码配置,而尽量少使用xml配置. 3.maven ...