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. centos7.3部署django用uwsgi和nginx[亲测可用]

    现在nginx nginx version: nginx/1.10.2 uwsgi 2.0.17 django2.0.5 都已经完成完毕,那么开始 uwsgi 配置 uwsgi支持ini.xml等多种 ...

  2. Vim中异步语法检查ale配置

    注意 在设置let g:ale_sign_error = '✗'和let g:ale_sign_warning = '⚡'这些时,可能vim不让你保存,提示fenc这个东西. 所以,为了保险起见,你最 ...

  3. requests接口测试——身份认证

    当调用者访问接口时需要进行用户认证(用户名密码的登录),只有通过了认证才允许调用者访问接口. 1.基本身份认证 许多要求身份认证的web服务都接受HTTP Basic Auth.这是最简单的一种身份认 ...

  4. Windows10系统下安装python2和python3双版本

    Windows10系统下安装Python3的步骤已经演示过(详见:https://www.cnblogs.com/schut/p/8399195.html),此处不再赘述Python的下载,主要介绍在 ...

  5. for 续5

    -------siwuxie095                 (五)usebackq 主要用于路径或文件名有空格时的情况 (说白了,就是对 in 后面的括号内集合进行转义)     单靠看帮助文 ...

  6. Spring Boot 、mybatis 、swagger 和 c3p0 整合

    文件路径如下 添加依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  7. 28-python 中格式对齐之中文格式对齐问题

    一般的可以按这个搞,但是中文就会有问题: python基础_格式化输出(%用法和format用法) 对于 print('1234567890' * 10)print('%10s' % '今天好')pr ...

  8. shell编程9*9乘法表

    </pre>脚本内容<pre name="code" class="plain">#!/bin/bash for i in " ...

  9. sublime相关资源

    Sublime Text 全程指南 http://zh.lucida.me/blog/sublime-text-complete-guide/ Sublime官网Package安装 https://p ...

  10. 8-5 Navicat工具与pymysql模块

    一 Navicat 在生产环境中操作MySQL数据库还是推荐使用命令行工具mysql,但在我们自己开发测试时,可以使用可视化工具Navicat,以图形界面的形式操作MySQL数据库 需要掌握的基本操作 ...