<!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. uva-141-枚举

    旋转过程的下标变化,画个2x2的表格,模拟就可以出来了 #include <string> #include<iostream> #include<map> #in ...

  2. uva-10391-枚举

    题意:对于输入的字符串,判断是否存在一个单词a=b+c 俩种方法,枚举每一个单词进行拼接,复杂度是n*n 枚举每一个单词,对单词进行substr,判断substr出来的是不在map里面 #includ ...

  3. Windows2008R2安装Exchange 2010前必须要做的准备工作

    由于WindowsServer2008R2已经包含了KB979099.KB982867.KB979744.KB983440.KB977020这些补丁的内容,所以无须另外下载安装. 详见https:// ...

  4. 《汇编语言 基于x86处理器》第十三章高级语言接口部分的代码 part 2

    ▶ 书中第十三章的程序,主要讲了汇编语言和 C/++ 相互调用的方法 ● 代码,汇编中调用 C++ 函数 ; subr.asm INCLUDE Irvine32.inc askForInteger P ...

  5. python中的expandtabs、\t

    expandtabs()将tab转换成空格,默认1个tab转成8个空格,\t制表符代表一个tab,我们也可以自定义转换成几个空格 举个例子: 1 a = "hello\tworld" ...

  6. JSP-打印动态表格

    input.html <script language="javascript"> function validate(f){ if(!(/\w+/.test(f.in ...

  7. WPF 自定义鼠标光标

    在程序中使用自定义鼠标光标的三种方式: RadioButton senderButton = sender as RadioButton; 方式一:                       str ...

  8. js乱码问题解决

    乱码有可能出现在下面两种情况 1.高级浏览器直接访问js路径 2.jsp引用js 针对上述两种情况的解决方式: 1.查看设置浏览器的字符集 2.查看web服务器的字符集,比如Tomcat 配置UTF- ...

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

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

  10. Java如何判断当前系统是Windows 还是LInux