JavaScript中DOM操作

javascript/jquery

浏览数:8

2020-5-23

AD:资源代下载服务

一、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();

作者:柚子