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. Hyberledger-Fabric 1.00 RPC学习（1）

    参考:http://hyperledger-fabric.readthedocs.io/en/latest/write_first_app.html 本文的目的就是基于Hyperledger Fabr ...

  2. lombok 的使用

    参考:https://blog.csdn.net/motui/article/details/79012846

  3. 「小程序JAVA实战」小程序视频处理工具ffmpeg（47）

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinchuligongjuffmpeg46/ 前面已经把视频成 ...

  4. centos7 ping www.baidu.com ping 不通。

    centos7 ping www.baidu.com ping 不通. 记录下,在搭建NodeJS服务器遇到的坑:centos7 ping www.baidu.com ping 不通. 1. 配置网卡 ...

  5. Java的bitmap到C

    在很多情况下android程序员需用到c,bimap这个是一个java中的类,android底层有一个skbitmap类和其对应.先在我遇到了需要把java的bitmap传递到底层中进行一些操作.现在 ...

  6. 【读书笔记】《Python_Cookbook3》第一章：数据结构和算法

      Python提供了多样化有用的内建数据结构,例如列表.集合.字典.大多数时候,这些结构的使用比较简单,然后,一些关于搜索.排序.过滤的常见问题经常出现.本章节的目标是讨论常见的数据结构,以及涉及到 ...

  7. Java核心技术-泛型程序设计

    使用泛型机制编写的代码要比那些杂乱地使用Object变量,然后再进行强制类型转换的代码具有更好的安全性和可读性. 泛型对于集合类尤其有用 1 为什么要使用泛型程序设计 泛型程序设计意味着编写的代码可以 ...

  8. 784. Letter Case Permutation 字符串中字母的大小写组合

    ［抄题］: Given a string S, we can transform every letter individually to be lowercase or uppercase to c ...

  9. rabbitmq 和Spring 集成 实现（一）

    1.增加pom.xml依赖 <!--rabbitmq消息队列依赖架包--> <dependency> <groupId>org.springframework.am ...

  10. cmake 强制链接静态库

    add_executable(main main.cpp) target_link_libraries(main ${CMAKE_SOURCE_DIR}/libbingitup.a) 静态库和动态库共 ...