<!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. [转]【ROLLUP】Oracle分组函数之ROLLUP魅力

    原创:http://blog.itpub.net/519536/viewspace-610995 本文通过演示给出Oracle ROLLUP分组函数的用法,体验一下Oracle在统计查询领域中的函数魅 ...

  2. 9. 一个list拆分成多个list返回

    /**     * @Title: splitList     * @Description: 1个list分割成多个list     * @param targe 原list     * @para ...

  3. 3. orcle导入导出dmp文件并更改表空间

    0.数据泵导入导出: expdp  test/test@10.0.0.11/orcl schemas=test dumpfile=test.dmp directory=DPDATA  logfile= ...

  4. djangobb之view form

    def add_topic(request, forum_id): """ create a new topic, with or without poll " ...

  5. <基础> PHP 数组操作

    array_filter — 用回调函数过滤数组中的单元 ( 如果 callback 函数返回 true,则 array 数组的当前值会被包含在返回的结果数组中.数组的键名保留不变 ) array a ...

  6. python 阿狸的进阶之路(7)

    面向对象 转自林海峰的博客  http://www.cnblogs.com/linhaifeng/articles/6182264.html 面向对象的理解: 将数据分类,比如学生类.数据有关的函数, ...

  7. mybatisGenerator自动生成pojo、dao、xml文件

    一.简介: mybatisGenerator是一款自动生成文件工具.本文使用idea2017.3.1来进行操作. 二.文件生成之后的项目结构: 三.开始生成步骤: 1.使用idea生成maven的结构 ...

  8. 【Noip模拟 20161005】友好城市

    问题描述 小ww生活在美丽的ZZ国.ZZ国是一个有nn个城市的大国,城市之间有mm条单向公路(连 接城市ii.jj的公路只能从ii连到jj).城市ii.jj是友好城市当且仅当从城市ii能到达城市jj并 ...

  9. datetime is not json serializable

    python, datetime is not json serializable import datetime def json_serial(obj): """JS ...

  10. C++复习：函数模板和类模板

    前言 C++提供了函数模板(function template).所谓函数模板,实际上是建立一个通用函数,其函数类型和形参类型不具体指定,用一个虚拟的类型来代表.这个通用函数就称为函数模板.凡是函数体 ...