Document对象：

  • 根元素的访问，也就是HTML标签的访问。使用document.documentElement访问根对象。
  • 使用Document对象查找对象
    • getElementById()：通过节点的id属性，查找对应节点。
    • getElementsByName()：通过节点的name属性，查找对应节点。
    • getElementsByTagName()：通过节点名称，查找对应节点。
  • 使用Document对象的方法创建节点：
    • crateElement(tagName)：创建元素节点。
    • createTextNode(data)：创建文本节点。
    • createAttirbute(name)：创建属性节点。(不使用)

Element对象：

  • 操作Element对象的属性：

    • 获取属性：getAttribute(name);方法
    • 设置属性：setAttribute(name,value)方法。
    • 删除属性：removeAttribute(name);方法。
  • 在Element对象中查找Element对象：
    • 在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。

Element对象的一个案例：

  • 在一个<ul></ul>标签下创建一个li标签

    1. <body>
    2. <ul id="city">
    3. <li id="bj" name="beijing">北京</li>
    4. <li id="tj" name="tianjin">天津</li>
    5. </ul>
    6. <script type="text/javascript">
    7. //创建一个标签元素
    8. var liElment = document.createElement("li");
    9. //创建一个文本节点
    10. var textElement = document.createTextNode("上海");
    11. //将文本节点加到标签元素下面
    12. liElment.appendChild(textElement);
    13. //为标签元素创建属性
    14. liElment.setAttribute("id","sh");
    15. liElment.setAttribute("name","Shanghai");
    16. //将标签元素加到ul标签下
    17. document.getElementById("city").appendChild(liElment);
    18. </script>
    19. </body>

Node对象包含：

  • 节点名称，值和类型。
  • 父节点，子节点和同辈节点。
  • 节点属性
  • 检测子节点和属性。
  • 操纵Dom节点树。
  • 复制和移动节点。

节点名称，值和类型：

  • nodeName：其内容就是给节点的名称。

    • 如果是元素节点，nodeName返回这个元素的名称。
    • 如果是属性节点，nodeName返回这个属性的名称。
    • 如果是文本节点，nodeName返回这个内容为#text的字符串。
  • nodeType：返回一个整数，这个数值代表给点节点的类型。
    • Node.ELEMENT_NODE：1，元素节点。
    • Node.ATTRIBUTE_NODE：2，属性节点。
    • Node.TEXT_NODE：3，文本节点
  • nodeValue：返回给定节点的当前值(字符串)：
    • 如果给定节点是一个元素节点：返回null。
    • 如果给定节点是一个属性节点：返回属性的值。
    • 如果给定节点时一个文本节点：返回文本节点的内容。
  • 下面是使用的示例：
    1. <body>
    2. <ul id="city">
    3. <li id="bj" name="beijing">北京</li>
    4. <li id="tj" name="tianjin">天津</li>
    5. </ul>
    6. <p>
    7. 你好
    8. </p>
    9. <script type="text/javascript">
    10. var bj = document.getElementById("bj");
    11. //元素节点
    12. //      alert(bj.nodeName);//li
    13. //      alert(bj.nodeType);//1
    14. //      alert(bj.nodeValue);//null
    15. //属性节点
    16. //      var name = bj.getAttributeNode("name")
    17. //      alert(name.nodeName); //name
    18. //      alert(name.nodeType); //2
    19. //      alert(name.nodeValue); //beijing
    20. var p = document.getElementsByTagName("p")[0];
    21. var text = p.childNodes[0];
    22. alert(text.nodeName);//#text
    23. alert(text.nodeType);//3
    24. alert(text.nodeValue);//你好
    25. </script>
    26. </body>

父节点，子节点和同辈节点：

  • 父节点：parentNode:

    • parentNode返回的永远都是一个节点，因为只有元素节点才有可能包含子节点。
    • document节点没有父节点。也就是文档节点没有父节点，也就是HTML
  • 子节点：childNode：
    • childNodes，获取指定节点的所有子节点。其实上个例子已经使用了。
    • firstChild：指定第一个子节点。
    • lastChild：指定最后一个子节点。
  • 同辈节点：
    • nextSibling：返回一个给定节点的下一个兄弟节点。
    • previousSibling：返回一个节点的上一个兄弟节点。
  • 示例如下：
    1. <body>
    2. <ul id="city">
    3. <li id="bj" name="beijing">北京</li>
    4. <li id="tj" name="tianjin">天津</li>
    5. </ul>
    6. <p>你好</p><input type="text">
    7. <script type="text/javascript">
    8. //获取p标签的父，子，兄节点
    9. var p = document.getElementsByTagName("P")[0];
    10. alert(p.parentNode);//body
    11. alert(p.childNodes[0].nodeValue)//你好
    12. alert(p.previousSibling.nodeValue)//空格，说明空格也会作为一个节点
    13. alert(p.nextSibling.nodeName);//input。这里就没出现空格，就是input节点
    14. </script>
    15. </body>

节点属性：

  • 节点属性attributes是Node接口定义的属性。
  • 节点属性attributes就是节点的属性(特别是元素节点)的属性。
  • 事实上，attributes中包含的是一个节点所有属性的集合。
  • attributes.getNameItem()和Element元素的getAttribute()方法很相似。
    1. <body>
    2. <ul id="city">
    3. <li id="bj" name="beijing">北京</li>
    4. <li id="tj" name="tianjin">天津</li>
    5. </ul>
    6. <script type="text/javascript">
    7. var bj = document.getElementById("bj");
    8. alert(bj.attributes[1].nodeValue);
    9. </script>
    10. </body>

检测子节点和属性

  • 查看是否有子节点：hasChildNodes();
  • 查看是存在属性：hasAttributes();
    • 即使节点中没有定义属性，其attributes属性还是有效的，而且长度是0。同样childNodes属性也是如此。
  • 当你想知道某个节点是否包含子节点或属性时，使用hasChildNodes(),hasAttributes()。如果想知道包含多少个：attributes和childNodes属性。
  • 在IE中不存在hasAttributes();方法。(不使用)
  • 示例如下：
    1. <body>
    2. <input type="text" id="username" value="username">
    3. <p>
    4. 明天休息
    5. </p>
    6. <script type="text/javascript">
    7. //      var username = document.getElementById("username");
    8. //      alert(username.hasChildNodes());//false
    9. //      alert(username.hasAttribute());//无效果
    10. var p = document.getElementsByTagName("p")[0];
    11. alert(p.hasChildNodes());//true
    12. </script>
    13. </body>

操作Dom节点数：

  • 插入节点：

    • appendChild()方法。
    • insertBefore()方法。
    • 没有insertAfter()方法。
  • 删除节点：
    • removeChild()方法。
  • 替换节点：
    • replaceChild()
  • 示例
    1. <body>
    2. <ul id="city">
    3. <!--注意这里不要回车-->
    4. <li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li>
    5. </ul>
    6. <script type="text/javascript">
    7. //创建<li id="sh" name="shanghai">上海</li>节点，增加到天津节点的前面
    8. //      var liElement = document.createElement("li");
    9. //      liElement.appendChild(document.createTextNode("上海"));
    10. //      liElement.setAttribute("id","sh");
    11. //      liElement.setAttribute("name","shanghai");
    12. //      liElement.insertBefore(document.getElementById("tj"));
    13. //      document.getElementById("city").appendChild(liElement);
    14. //<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面，没有insertAfter()方法。
    15. var liElement = document.createElement("li");
    16. liElement.appendChild(document.createTextNode("上海"));
    17. liElement.setAttribute("id","sh");
    18. liElement.setAttribute("name","shanghai");
    19. var bjElement = document.getElementById("bj")
    20. //得到兄弟节点
    21. var nextElement = bjElement.nextSibling;
    22. liElement.insertBefore(nextElement);
    23. //添加到city下面
    24. document.getElementById("city").appendChild(liElement);
    25. </script>
    26. </body>

复制和移动节点：

  • 复制节点：cloneNode(boolean)方法，其中boolean参数是判读是否复制子节点。
  • 移动节点：由三种方法组合完成：
    • 查找节点：

      • getElementById();通过节点id属性，查找对应节点。
      • getElementsByName();通过节点名称，查找对应节点。
      • getElementsByTagName();通过节点名称，查找对应节点。
    • 插入节点：
      • insertBefore()方法
      • appendChild()方法。
    • 替换节点：
      • replaceChild()方法。
  • 示例代码如下：
    1. <body>
    2. <ul id="city">
    3. <li id="bj" name="beijing">北京</li>
    4. <li id="tj" name="tianjin">天津</li>
    5. </ul>
    6. lt;ul id="game">
    7. <li id="fk" name="fankong">反恐精英</li>
    8. <li id="xj" name="xingji">星际</li>
    9. </ul>
    10. lt;script type="text/javascript">
    11. //当点击北京节点，就和反恐精英替换
    12. document.getElementById("bj").onclick = function(){
    13. //得到北京节点
    14. var bjElement = document.getElementById("bj");
    15. //得到反恐精英
    16. var fkElemet = document.getElementById("fk");
    17. //这里也可以:this.parentNode.replaceChild(fkElemet,bjElement);
    18. bjElement.parentNode.replaceChild(fkElemet,bjElement);
    19. }
    20. lt;/script>
    21. </body>

    复制案例：

    1. <body>
    2. <input type="button" id="login" value="登陆">
    3. <p>
    4. 按钮来这：
    5. </p>
    6. <script type="text/javascript">
    7. document.getElementById("login").onclick = function(){
    8. var loginElement = document.getElementById("login");
    9. //也可以写成:var copy = this.cloneNode(true);
    10. var copy = loginElement.cloneNode(true);
    11. var pElemet = document.getElementsByTagName("p")[0];
    12. pElemet.appendChild(copy);
    13. }
    14. </script>
    15. </body>

document,element,dom对象api详解的更多相关文章

  1. [总结]JS操作DOM常用API详解

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  2. jquery对象和DOM对象的相互转换详解

    jquery对象和DOM对象的相互转换 在讨论jquery对象和DOM对象的相互转换之前,先约定好定义变量的风格如果获取的是jquery对象,那么在变量前面加上$,例如 var $varible = ...

  3. HTML5 FileReader读取Blob对象API详解

    使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...

  4. DOM API详解

    来源于:http://zxc0328.github.io/2016/01/23/learning-dom-part1/ https://zxc0328.github.io/2016/01/26/lea ...

  5. hibernate学习（2）——api详解对象

    1   Configuration 配置对象 /详解Configuration对象 public class Configuration_test { @Test //Configuration 用户 ...

  6. javascript event（事件对象）详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  7. canvas绘图API详解

    canvas绘图API详解 1.context的状态 矩阵变换属性 当前剪辑区域 context的其他状态属性: strokeStyle, fillStyle, globalAlpha, lineWi ...

  8. jqGrid APi 详解

    jqGrid APi 详解 jqGrid皮肤 从3.5版本开始,jqGrid完全支持jquery UI的theme.我们可以从http://jqueryui.com/themeroller/下载我们所 ...

  9. 百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

随机推荐

  1. 网站用户行为分析——Linux的安装

    Linux的选择 在Linux系统各个发行版中,CentOS系统和Ubuntu系统在服务端和桌面端使用占比最高,网络上资料最是齐全,所以建议使用CentOS系统或Ubuntu. 一般来说,如果要做服务 ...

  2. centos7安装mysql5.7.18笔记

    重装了一下系统,装了centos7,但是centos7下默认没有安装mysql,有MariaDB数据库,网上的解释是: “MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用 ...

  3. js input 不可编辑可传值设置

    在表单提交中,设置input不可编辑,但是可以向后台传输数据,的设置方法: $('#input').attr("readonly",true);

  4. FPGA软硬协同设计学习笔记及基础知识（一）

    一.FPGA软件硬件协同定义: 软件:一般以软件语言来描述,类似ARM处理器的嵌入式设计.硬件定义如FPGA,里面资源有限但可重配置性有许多优点,新的有动态可充配置技术. Xilinx开发了部分动态可 ...

  5. 【EXCEL】XMLファイルを開く方法（XML文件打开方法）

    前言 XMLとは:Extensible Markup Language(エクステンシブル マークアップ ランゲージ)は.基本的な構文規則を共通とすることで.任意の用途向けの言語に拡張することを容易とし ...

  6. Java设计模式（7）——结构型模式之适配器模式（Adapter）

    一.概述 概念 其实,举个生活中的例子的话,适配器模式可以类比转接头,比如typeC和USB的转接头,把原本只能接typeC的接口,拓展为可以接普通USB:这里的转接头一方面需要查在typeC上,一方 ...

  7. Caliburn.Micro 杰的入门教程2 ，了解Data Binding 和 Events（翻译）

    Caliburn.Micro 杰的入门教程1(翻译)Caliburn.Micro 杰的入门教程2 ,了解Data Binding 和 Events(翻译)Caliburn.Micro 杰的入门教程3, ...

  8. P1488 肥猫的游戏

    题目描述 野猫与胖子,合起来简称肥猫,是一个班的同学,他们也都是数学高手,所以经常在一起讨论数学问题也就不足为奇了.一次,野猫遇到了一道有趣的几何游戏题目,便拿给胖子看.游戏要求在一个有n个顶点凸多边 ...

  9. 厦门Uber优步司机奖励政策（12月28日到1月3日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. 函数返回const，以便控制访问

    #include <stdio.h> class const_out_parameter{ private: ]; public: int* const_out_parameter_tes ...