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. 自动执行单元测试maven插件

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-suref ...

  2. Python2.X如何将Unicode中文字符串转换成 string字符串

    Python2.X如何将Unicode中文字符串转换成 string字符串   普通字符串可以用多种方式编码成Unicode字符串,具体要看你究竟选择了哪种编码:unicodestring = u&q ...

  3. springcloud(四) ribbon和feign

    Ribbon使用 order-service工程: application.yml: server: port: 9010 #order 服务都是用90 开头的端口 spring: applicati ...

  4. PyQt5系列教程(三)用py2exe进行程序打包

    软硬件环境 Windows 10 Python 3.4.2 PyQt5 Py2exe 前言 在我们开发了完整的PyQt5项目后,一般都会将其打包成exe文件,方便其他人使用.今天我们就用Py2exe这 ...

  5. linux vim操作技巧

    安装: NERDTree 从 http://www.vim.org/scripts/script.php?script_id=1658  下载 unzip NERD_tree.zip cd ~/.vi ...

  6. tomcat加固

    tomcat安全加固和规范 tomcat是一个开源Web服务器,基于Tomcat的Web运行效率高,可以在一般的硬件平台上流畅运行,因此,颇受Web站长的青睐.不过,在默认配置下其存在一定的安全隐患, ...

  7. java中回调函数的使用

    package com.huawei.common; import java.sql.ResultSet;import java.sql.SQLException; /** * 回调函数 * @aut ...

  8. idea提示，格式化代码，清除不使用的包快捷键，maven自动导jar包

    一.提示快捷键 idea默认快捷键是ctrl+space,通常和别的软件快捷键冲突,所以将快捷键修改为alt+/ 二.格式化快捷键ctrl+alt+l,通常和qq.tim快捷键冲突,请修改qq或者ti ...

  9. MySql 关键字冲突解决办法

    今天把项目发布到另一台机器上时,因为mysql版本不一致,出现了关键字冲突,virtual关键字,不清楚是不是mysql添加的新特性. select * from herb where name=&q ...

  10. 25.Reverse Nodes in k-Group (List)

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. If ...