Javascript——DOM简介

DOM —— 文档对象模型

• 文档对象模型（document object model），一套操作页面元素的API。DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作。

• DOM树

  • 文档：一个网页可以称为文档
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
  • 元素：网页中的标签
  • 属性：标签的属性

• DOM 经常进行的操作

  • 获取元素

    • 调用document对象的getElementById方法根据id获取元素。

    • 调用document对象的getElementByTagName方法根据标签名获取元素。返回值是同名元素对象组成的数组。该方法获取的元素是动态增加的。

    • 调用document对象的getElementByName方法根据name获取元素。（IE和Opera会有兼容问题，建议使用选中id方法）

    • 调用document对象的getElementByClassName方法根据类名获取元素。不支持IE8一下的浏览器。

    • 调用document对象的querySelector方法根据选择器获取元素。通过css中的选择器去选取第一个符合条件的标签元素。

      • querySelectorAll可以选取所有符合条件的标签元素。

        不支持IE8以下的浏览器

  • 对元素进行操作

  • 动态创建元素

  • 事件

    • 事件：在什么时候做什么事。

    • 执行机制：触发响应机制

    • 绑定事件/注册事件三要素：

      ①事件源：给谁绑定事件

      ②事件类型：绑定什么类型的事件，如：click单击事件

      ③事件函数：事件发生后执行什么，函数

    • 事件监听

      • Javascript解析器会给有绑定事件的元素添加一个监听，解析器会一直监测这个元素，只有触发对应的绑定事件，会立刻执行事件函数。

      • 常用监听方法：

        ①绑定HTML元素属性

        ②绑定DOM对象属性

  • 获取标签内部内容的属性

    • innerHTML 和 innerText属性
    • innerHTML属性，在获取标签内部内容时，如果包含标签，获取的内容会包含标签，获取的内容包括空白换行等。
    • innerText属性，在获取标签内部内容时，如果包含标签，获取的内容会过滤标签，获取的内容会去掉换行和缩进等空白。
    • 两个属性还可以给双标签内部更改内容；innerHTML按照HTML语法中的标签加载；innerText按照普通字符加载。

  • 表单元素属性

    • value 用于大部分表单元素的内容获取（option除外）
    • type 获取input标签的类型（输入框或复选框等）
    • disabled 禁用属性
    • checked 复选框选中属性
    • selected 下拉菜单选中属性
    • DOM中元素对象的属性值只有一个时，会被转成布尔值显示。（txt.disabled = true;）

  • 自定义属性操作

    • getAttribute(name) 获取标签行内属性
    • setAttribute(name,value) 设置标签行内属性
    • removeAttribute(name) 移除标签行内属性
    • 三个方法可以获取任意行内属性，包括自定义的属性

  • style样式属性操作

    • style属性方式设置的样式显示在标签行内
    • element.style属性的值，是所有行内样式组成的一个样式对象
    • 通过样式属性设置width、height等属性时，记得加上"px"。

  • className类名属性操作

    • 修改元素的className属性相当于直接修改标签的类名

• DOM节点操作

  • 节点属性

    • nodeType 节点类型，属性值数字，共12种。

      1 元素节点

      2 属性节点

      3 文本节点

    • nodeName 节点名称（标签名称），只读

    • nodeValue 节点值，返回或设置当前节点的值。元素节点的nodeValue始终是null

  • 父子节点常用属性

    • childNodes 只读属性，获取一个节点所有子节点的实时集合（动态变化的）
    • children 只读属性，返回一个节点所有的子元素节点集合，是一个动态更新的HTML元素集合
    • firstChild 只读属性，返回该节点的第一个子节点，如果该节点没有子节点返回null
    • lastChild 只读属性，返回该节点的最后一个子节点，如果该节点没有子节点返回null
    • parentNode 返回一个当前节点的父节点，如果没有这样的节点，返回null
    • parentElement 返回当前节点的父元素节点，如果没有父节点或者父节点不是一个DOM元素，返回null

  • 兄弟节点常用属性

    • nextSibling 只读属性，返回与该节点同级的下一个节点，没有则返回null
    • previousSibling 只读属性，返回与该节点同级的上一个节点，没有则返回null
    • nextElementSibling 只读属性，返回与该节点同级的下一个元素节点，没有则返回null（IE9 以后支持）
    • previousElementSibling 只读属性，返回与该节点同级的上一个元素节点，没有则返回null（IE9 以后支持）

  • 创建新节点

    • document.creatElement("div") 创建元素节点
    • document.creatAttribute("id") 创建属性节点
    • document.creatTextNode("this is text") 创建文本节点
    • 将创建的新节点存在变量中，方便使用

  • 节点常用操作方法

    • parentNode

      ①parentNode.appendChild(child) : 将节点child添加到指定的父节点parentNode的子节点列表末尾

      ②parentNode.replaceChild(newChild,oldChild) ：用指定的节点newChild替换当前节点的一个子节点oldNode，并返回被替换掉的节点

      ③parentNode.insertBefore(newNode,referenceNode) ：在参考节点referenceNode之前插入一个拥有指定父节点的子节点，referenceNode必须设置，如果referenceElement为null则newNode将被插入到子节点末尾

      ④parentNode.removeChild(child) ：移除当前节点的一个子节点child，这个节点必须存在于当前节点中

    • Node.cloneNode()：克隆一个节点，可以选择是否克隆这个节点下的所有内容。参数为Boolean，表示是否采用深度克隆，true 则表示该节点的所有后代节点都会被克隆；false 表示只克隆该节点本身。默认值是true。

      （注意克隆时，标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制，但是javaScript动态绑定的事件不会被复制）

    • Node.contains(child)：传入节点是否为该节点的后代节点，返回布尔值

    • 判断当前节点是否有子节点：

      • Node.hasChildNodes()：是否包含有子节点，返回一个布尔值，没有参数
      • node.childNodes.length > 0
      • node.firstChild !== null

  • 注册事件

    • element.addEventListenere(事件类型，事件函数)，不支持IE9以下

      同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数

    • element.attachEvent(on+事件类型，事件函数) ，只支持IE10及以下的浏览器

    • 综上，注册事件的兼容写法

      自定义一个注册事件函数

       //兼容所有浏览器的解除绑定事件的函数`
       //参数：事件源，事件类型，事件函数
       function deleEvent(ele,type,fun){
         //浏览器能力检测
         if(ele.removeEventListener){
             ele.removeEventListener(type,fun);
         }else if(ele.detachEvent){
             ele.detachEvent("on" + type,fun);
         }
       }
      

  • 移除事件

    • element.removeEventListener(事件类型，事件函数引用名)，注意，这里没有办法移除一个匿名函数，所以注册事件时需要单独声明一个有函数名的事件函数。不支持IE9以下
    • element.detachEvent(on+事件类型，事件函数引用名)，只支持IE10以下
    • 综上，移除事件的兼容写法

     //兼容所有浏览器的绑定事件的函数
     function addEvent(ele,type,fn){
       //IE9及以上使用addEventListener ，IE9以下就使用addEvent
       //判断浏览器  浏览器能力检测
       if(ele.addEventListener){
           ele.addEventListener(type,fn);
       }else if(ele.attachEvent){
           ele.attachEvent("on" + type,fn);
       }
     }
    

Javascript——DOM简介

原文：https://www.cnblogs.com/dreamtown/p/14476625.html