<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <a name="pname">Hello</a>

     <a id="aid" title="获取a标签的属性成功">aaaaaaa</a>

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

     <ul><li>1</li><li>2</li><li>3</li></ul>  <!--设置一个ul节点,包含三个li子节点-->

     <div id="div">

         <p id="pid">div的p元素</p>  <!--设置一个p节点，它的父节点是div-->

     </div>

     <script>

         //通过名字查找元素查找并修改其内容

         getName();

         function getName(){

             var count = document.getElementsByName("pname");  //计算名为pname的节点一共多少个

             alert("id=pname的标签个数："+count.length);

             var p = count[1];

             p.innerHTML = "World";  //通过下标改变标签的内容

         }

         //通过id查找并获取节点属性内容

         getAttr();

         function getAttr(){

             var anode = document.getElementById("aid");//获取id=aid的节点

             var attr = anode.getAttribute("title"); //获取title属性的内容

             alert(attr);

         }

         //通过id查找并动态设置标签属性

         setAttr();

         function setAttr(){

             var anode = document.getElementById("aid2");//获取id=aid2的节点

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

             var attr = anode.getAttribute("title");//获取查看title属性的内容，看是否设置成功

             alert(attr);

         }

         //通过标签名查找节点并获取子节点个数

         getChileNode();

         function getChileNode(){

             var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取标签名为ul的节点的子节点

             alert("ul子节点个数："+childnode.length);//计算子节点的个数

         }

         //通过子节点获取父节点

         getParentNode();

         function getParentNode(){

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

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

         }

         //动态添加节点

         createNode();

         function createNode(){

             var body = document.body;

             var input = document.createElement("input"); //动态添加节点

             input.type = "button";

             input.value = "动态添加的按钮";//创建一个按钮

             body.appendChild(input);

         }

         //在特定的位置动态添加一个p元素

         //addNode();

         function addNode(){

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

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

             var newnode = document.createElement("p");

             newnode.innerHTML = "在特定的位置动态添加一个p元素";

             div.insertBefore(newnode,node);

         }

         //删除节点

         removeNode();

         function removeNode(){

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

             var p = div.removeChild(div.childNodes[1]);

         }

         //网页尺寸

         getSize();

         function getSize(){

             //offsetWidth，offsetHeight获取不包含滚动条的页面宽和高

             var width = document.documentElement.offsetWidth;

             var height = document.documentElement.offsetHeight;

             alert("不包含滚动条的页面宽和高:"+width+","+height);

             //scrollWidth，scrollHeight获取不包含滚动条的页面宽和高

             var width1 = document.documentElement.scrollWidth;

             var height1 = document.documentElement.scrollHeight;

             alert("包含滚动条的页面宽和高:"+width1+","+height1);

         }

     </script>

 </body>

 </html>

javascript学习笔记（九）：DOM操作HTML的各种方法使用的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. javascript学习笔记之DOM与表单

    DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  3. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  4. javascript学习笔记之DOM

    DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  5. JavaScript学习笔记之DOM介绍

    目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...

  6. JavaScript 学习笔记-HTML&&DOM

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...

  7. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

  8. 1.4（JavaScript学习笔记） window对象的属性及方法

    一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...

  9. JavaScript学习笔记：数组的indexOf()和lastindexOf()方法

    https://www.w3cplus.com/javascript/array-part-6.html

  10. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

随机推荐

  1. uva10603-倒水问题-暴力枚举-隐式图搜索

    题意: 给你三个杯子,a,b,c,没有刻度,刚开始c杯是满的,倒水的要求,要么倒出水的杯子倒空,要么倒入杯子倒满. 结果: 要求某个杯子内有d水量,并且倒出的水量最少,如果倒不出d水量,那么倒出d1( ...

  2. 20.纯 CSS 为母亲节创作一颗像素画风格的爱心

    原文地址:https://segmentfault.com/a/1190000014837536 感想: 网格grid 又来了: fr : (剩余空间长度)单位, 1.当(50px,nfr),nfr代 ...

  3. linux path 与 classpath 区别

    一.OS依据path中的路径信息来寻找可执行指令: 例如: cat /etc/profile 我们就可以在任意目录执行hadoop / hdfs / yarn / java 等相关命令了 export ...

  4. oracle数据库创建并导入dmp文件

    导出:exp userid=xcgwjxuser/xcgwjxuser@orcl file=D:\xcgwjx2014.dmp 导入:imp userid=xcgwjxuser/xcgwjxuser@ ...

  5. kubernetes安装过程报错及解决方法

    1.your configuration file uses an old API spec: "kubeadm.k8s.io/v1alpha2". 执行kubeadm init ...

  6. 使用STM32CubeMX生成USB_HOST_HID工程[添加对CAPS_LOCK指示灯的控制][SetReport]

    在之前(使用STM32CubeMX生成USB_HOST_HID工程)的基础上进行修改 在结合之前在pc上的测试 USB之HID类Set_Report Request[调试手记1] 测试代码如下: /* ...

  7. python3.6.2（32位）的安装-1

    简介:Python不需要编译成机器代码,是解释执行.解释器是机器指令,CPU执行解释器,解释器执行代码. 1.Python官网下载地址:https://www.python.org/,选择Downlo ...

  8. 前后台交互实现点击超链接通过指定的 url 去网络或者文件服务器下载文件

    前台 VUE 界面: <el-table-column prop="attachment" align="center" label="附件详情 ...

  9. 【版本发布】JAVA微服务开发框架，Jeecg-P3 1.0.0 重构版本发布

    1.项目介绍 Jeecg-P3是一个微服务框架,采用插件式模式开发:业务插件以JAR方式提供,松耦合可插拔支持独立部署,也可无缝集成Jeecg平台中,目前jeecg已经提供了在线聊天,我的邮箱等一系列 ...

  10. day20-面向对象编程、继承

    一.面向对象编程 1.简介 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. ...