<!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. sql zhuan ORACLE

    DbType   OracleType SqlDatabase OracleDatabase SqlParam.cs SqlServerHelper.cs InsertByHashtableRetur ...

  2. ROS学习手记 - 8 编写ROS的Publisher and Subscriber

    上一节我们完成了 message & srv 文件的创建和加入编译,这次我们要玩简单的Publisher 和 Subscriber 要玩 Publisher 和 Subscriber, 需要具 ...

  3. wgrib读grib数据

    该文章来自博客:http://windforestwing.blog.163.c ... 412007103084743804/如有错误 ,大家及时指出啊!ps:meteoinfo可以直接处理grib ...

  4. 1.正则re

    正则 :规则表达式 一般在匹配非结构化的数据时用的比较多,结构化的数据一般用xpath,bs4.但具体使用起来都是视情况而定,相对而言.正则规则平时涉及最多也就是匹配邮箱,电话,及特殊字符串.规则相对 ...

  5. 笔记：js疑难复习

    apply 和 call的区别 call 和 apply 的区别只在于这两个函数接受的参数形式不同 var Person = function(name,age){ this.name = name; ...

  6. IDEA Maven项目 编译的问题

    IDEA中,点击项目的maven插件的 compile: 出现: [INFO] ------------------------------------------------------------ ...

  7. Flex自定义组件、皮肤，并调用

    标签:Flex  自定义组件  自定义皮肤  主应用调用模块 本程序样例学习自flex 实战教程.但因原教程代码不全,且根据个人需求有更改. 1文件列表 自定义as类Reveal.as,该类实现组件的 ...

  8. 20165304《Java程序设计》第五周学习总结

    教材学习内容总结 第七章 1.内部类 注意内部类和外嵌类的关系: 外嵌类的成员变量和方法在内部类有效 内部类的类体不可以声明static变量和方法.外嵌类的类体可以用内部类声明对象. 内部类仅供它的外 ...

  9. java中定义的四种类加载器

    1,Bootstrap ClassLoader   启动类加载器2,ExtClassLoader   扩展类加载器3,AppClassLoader   系统类加载器4,ClassLoader   类加 ...

  10. WPF 中 TextBlock 文本换行与行间距

    换行符: C#代码中:\r\n 或  \r 或 \n XAML中: 或 注:\r 回车 (carriage return 缩写),\n 新行 (new line 缩写). 行间距: LineHeigh ...