乐趣区

JavaScript中DOM操作

jiezi

一、JavaScript

基于对象，客户端浏览器、事件驱动的脚本语言。

组成：Dom、Bom、ECMAScript

    1.DOM -> 文档对象模型 封装文档操作相关 API
    2.BOM-> 浏览器对象模型 封装浏览器操作相关 API
    3.ECMAScript-> 核心语法: 常量、变量、数据类型、运算符、流程语句、函数、内置对象等

二、DOM 介绍

  • 什么是 DOM?

    （document object Model）文档对象模型, 用来表示和操作 html 或 xml 文档内容的基础 API. 当页面加载时，浏览器会创建页面的文档对象模型 DOM，而 DOM 模型被构造为对象的树(Dom Html Tree); DOM 包含了所有的 html 标签元素、文本字符串、甚至是 html 注释; 利用 DOM 中的属性和方法，使程序有能力动态的访问和更新文档中的内容、结构以及样式，这样就使得页面的交互性大大增强;

  • DOM 有什么用？

    1. 通过 DOM 操作能够改变页面中所有 HTML 元素
2. 通过 DOM 操作能够改变页面中所有 HTML 属性
3. 通过 DOM 操作能够改变页面中所有 CSS 样式
4. 通过 DOM 操作能够对页面中所有事件做出反应;

  • DOM Tree 介绍

    DOM 把层次中的每一个对象都称之为节点，这个层次结构可以看作树形结构，就如同我们的目录，一个根目 录下有子目录，子目录下面还有子目录。

  • DOM 节点类型与相关属性

    DOM 树中所有的对象都是节点，如: 文档节点、元素节点、属性节点、文本节点、注释节点等; 
节点相关的属性如下:
    nodeName 获取节点的名称，只读
    nodeValue 获取节点内容(适用于文本节点和注释节点) 
    nodeType 获取节点类型，只读

  • 节点访问

     节点树中的节点彼此拥有层级关系

    通过属性 nodeType 可以判断节点类型，那么根据节点类型 DOM 树可以分为以下两种:   
1. 包含了所有标签、属性、文本、注释等全部类型的 DOM 树，可以称为节点 (node) 树; 
2. 含标签这一种类型，可以称为元素 (element) 树。元素树状图更加简洁，查找和操作起来也更加快捷。所以，一般除非必要情况，都使用元素树来操作。

    所谓 DOM 树中的节点关系, 就是父子关系、兄弟关系、祖孙关系; 对应节点如下:

      *  父节点(parent node) 父节点可以拥有任意数量的子节点
  *  子节点(child node) 子节点只能拥有一个父节点
  *  兄弟节点(sibling node) 拥有相同父节点的同级节点
  *  根节点(root node) 一个 html 文档一般只有一个根节点，根节点没有父节点，是最上层的节点
  *  祖先节点 包含子节点的节点都可以叫做祖先节点，包括父节点
  *  后代节点 一个节点内包好的所有节点，叫做后代节点，包括子节点

节点的层级访问

    * parentNode 获取当前节点的父节点
    * childNodes 获取当前元素节点的所有子节点
    * firstChild 获取当前元素节点的第一个子节点
    * lastChild 获取当前元素节点的最后一个子节点
    * previousSibling 获取当前节点的前一个同级节点
    * nextSibling 获取当前节点的后一个同级节点

元素的层级访问(Element 元素节点之间的访问)

    * firstElementChild、lastElementChild 类似 firstChild 和 lastChild, 返回类型只有 Element 类型，忽略文本、注释、空白节点(IE8 及以下返回 undefined)
    * nextElementSibling、previousElementSibling 类似 nextSibling 和 previousSibling, 返回类型只有 Element 类型，忽略文本、注释、空白节点(IE8 及以下返回 undefined)
    * children 得到当前元素所有子元素的集合
    * childElementCount 子元素的数量
    * Element 同样可以访问 parentNode 属性，只不过返回的结果都是 Elment 类型
```

三、DOM 操作

  • 创建节点

        * document.creatElement("tagName") (最常用)创建元素节点，返回一个 element 对象
    * document.creatTextNode("data") 创建新的文本节点，返回新创建的 Text 节点
    * document.createAttribute("attributename")创建一个指定名称的属性，并返回 Attr 对象属性

  • 追加和插入节点

        * element.appendChild(newnode) 在指定节点的最后一个子节点列表之后添加一个新的子节点
    * element.insertBefore(newnode,oldnode) 在已有的子节点前插入一个新的子节点

  • 删除、替换和克隆子节点

        * element.removeChild(node)从子节点列表中删除某个节点，若果删除成功，此方法返回被删除的节点; 如果失败，则返回 null
    * element.replaceChild(newNode,oldNode)实现子节点 (对象) 的替换，返回被替换对象的引用
    * element.remove(index) 用于从下拉列表删除选项(参数 index，规定要删除的选项的索引号)(删除元素本身)
    * 注: 如果不添加参数，可以用于移除当前元素如:document.getElementById('div').remove();
退出移动版