05月
25

dom

发表于 • 字数统计 1.7k
文章目录
  1. dom
    1. 类型
    2. 获取
  2. 事件
    1. 事件源
    2. 事件类型
    3. 事件处理程序
  3. 事件监听
  • 操作元素
    1. 用父子兄弟关系获取节点
  • 操作节点
    1. 创建节点
    2. 插入节点
    3. 删除节点
    4. 复制节点
    5. nodeType 属性
  • 节点的属性操作
    1. 获取节点的属性值
      1. 方法一
      2. 方法二
    2. 节点内容操作
  • H5拓展
    1. 获取元素
    2. 类名操作
  • 定时器

    • dom

    类型

    • 文本节点
    • 元素节点
    • 注释节点

    获取

    • document.getElementById(id)
    • document,getElementsByClassName(className) HTMLCollection 类数组。在IE低版本(6、7、8)浏览器中不能通过这个方法获取元素
    • document.getElementsByTagName(tagName) HTMLCollection 类数组
    • document.querySelector("#id/.className/tagName/tagName[property(也叫 attribute)]") 只选中第一个符合条件的元素，H5 新增方法
    • document.querySelectorAll("#id/.className/tagName/tagName[property(也叫 attribute)]") 选中所有符合条件的元素，返回 NodeList，取得当时的节点，页面变化时不会改变，其他方法返回 HTMLCollection，会跟踪页面变化。H5 新增方法
    • document.body 和 document.ducumentElement 分别获取页面的 body 标签和 html 标签

    注意 HTMLCollect 类数组，随页面元素改变而改变，没有 forEach 方法，NodeList 表示当时页面的元素，页面改变之后也不会变化，有 forEach 方法

    forEach(function (item, index, array) {})

    事件

    事件源

    引发后续事件的元素

    事件类型

    如 onclick、onmousemove、onmouseenter、onload（加载完成）等

    事件处理程序

    函数 ，如

    1
    2
    3
    4
    5
    6
    7
     ele.onclick = function() { console.log(this) } 
     // 通过 on 方式只能绑定一个相同事件，比如 此时再绑定一个 onclick，就会只有后面的 onclick 生效
    // 这个方法不能传参，参数会自动变成事件对象 ，this 指向 ele (即调用这个函数的对象)
    //解除绑定
    ele.onclick = function() {
        ele.onclick = null
    }
    1
    2
    3
    <div onclick="clickEvent(123)">
    </div> 
    <!-- 绑定时必须带 ()，可以传参，行内绑定的事件 this 指向 window，因为它带了 ()，是一个返回值，实际在 window 中调用-->

    事件监听

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // addEventListener() 事件监听，可以绑定监听多个相同事件，如
    ele.addEventListener("click", function(){console.log(1)})
    ele.addEventListener("click", function(){console.log(2)})
    //此时点击ele，将会打印 1 和 2

    // 事件发生时，会有一个目标阶段，之后先事件捕获，再事件冒泡
    ele.addEventListener("click",function () {}, true) // 参数一 代表事件类型，参数二表示事件函数，参数三表示监听冒泡阶段还是捕获阶段，默认为 false，冒泡捕获
    // 解除监听绑定 通过函数名解除绑定，因此绑定的函数必须是个具名函数，否则无法解绑
    //此时可以解绑
    function fn1() {}
    ele.addEventListener("click",fn1 )
    ele.removeEventListener("click", fn1) 
    // 这种情况不能解绑，因为 fn2 是个回调函数，并没有在全局声明（这一点和定时器是一样的），解绑中无法找到 fn2，fn2 不在作用域中，在自身作用域中无法找到之后去 window 中也无法找到，就会返回一个错误
    ele.addEventListener("click",function fn2() {}, true)
    ele.removeEventListener("click", fn2)

    操作元素

    修改元素的 行内样式

    1
    2
    3
    4
    ele.style.backgroundColor = "red"
    // 不能在对象中写成 background-color,因为 - 不合法,要用驼峰命名或者 ele.style["background-color"]
    ele.style.width = "100px" // 修改单个样式
    ele.style.cssText = "background-color: red;width: 100px" //修改所有行内样式，会覆盖所有行内样式！ 可以用 ele.style.cssText += " " + "height: 100px"; 这样

    一般用来获取元素的内联样式、外联样式（也能获取行内样式），只能获取，不能设置。。

    1
    2
    3
    4
    5
    6
    7
    8
    // 获取内联、外联样式
    // 第一个参数： 要获取样式的元素
    // 第二个参数： 要获取的伪元素名 或者 null（默认）
    getComputedStyle(ele, null).styleName
    getComputedStyle(ele, null).backgroundColor
    // 打印出 ele 的内联样式 背景颜色
    getComputedStyle(ele, "before").content
    // 打印出 ele::before 的 content !

    用父子兄弟关系获取节点

    1
    2
    3
    4
    5
    6
    7
    8
    ele.parentNode // 获取父节点
    ele.children // 获取所有子节点 返回 HTMLCollect 类数组，随页面元素改变而改变
    ele.firstChild //  获取第一个子元素节点（一般会获取到文本节点，也就是换行符。。） lastChild 同理
    ele.firstElementChild // 获取第一个元素子节点 lastElementChild 同理
    ele.nextSibing // 前一个兄弟节点
    ele.prevSibing // 后一个兄弟节点
    ele.nextElementSibing // 同样，上面的会获取到文本节点
    ele.prevElementSibing // 同样，上面的会获取到文本节点

    操作节点

    创建节点

    document.createElement("标签名")

    插入节点

    父节点.appendChild(新的子节点)插入到父节点最后

    父节点.insertBefore(新的子节点，作为参考的子节点) 插入到参考节点之前

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    // 这也是原生方法，而且兼容 ie4+ 
    /* 相当于 var ele1 = document.create()
    *        ele1.innerHTML = "<p></p>" // 或者innerText
    *        ele.appendChild(ele1)
    *        或者insertBefore之类的
    * 即整合了创建一个元素后添加到指定位置
    */ 
    ele.insertAdjacentHTML(arg1, htmltext) 
    ele.insertAdjacentText(arg2, text)
    /* 参数一 可取四个值 
    "beforeBegin", 插入成 ele 上一个兄弟元素
    "afterBegin", 插入成 ele 第一个子元素
    "beforeEnd", 插入成 ele 最后一个子元素
    "afterEnd", 插入成 ele 下一个兄弟元素
    */

    删除节点

    父节点.removeChild(子节点)

    node1.pardentNode.removeChild(node1) 自己删自己

    node1.remove() 删除节点 node1， IE10+

    复制节点

    要复制的节点.cloneNode(true) 默认为false，浅拷贝（不拷贝子节点，只拷贝自身）； 为 true时，深拷贝（会拷贝子节点）。一般不复制有 id 的节点，因为会造成页面中有两个相同 id

    nodeType 属性

    nodeType == 1 元素节点，即标签

    nodeType == 2 属性节点

    nodeType == 3 文本节点

    nodeType == 8 注释节点

    nodeType == 9 整个文档的 DOM 根节点

    节点的属性操作

    获取节点的属性值

    方法一

    ele.属性

    ele.[属性]

    方法一操作的是 ele 对象，所以有部分属性无法读取，如 class 得写成 className 才能读取。

    方法二

    由于部分属性无法使用方法一获取，比如 class，所以可以用方法二

    ele.getAttribute("属性名称")

    ele.setAttribute("class", "div1") 这也是一个重写的方法，会把 class 属性（参数一）上所有的值都删掉，改成设置的值。 参数一为属性名称，参数二为要设置的值

    方法二直接操作节点对象

    节点内容操作

    ele.innerHTML 可以将内容解析成带标签文本

    ele.innerText 将内容当成字符串添加

    H5拓展

    获取元素

    就是上面提到的两种支持 CSS 选择器的方法

    类名操作
    1
    2
    3
    4
    ele.classList.add("类名") // 添加类名
    ele.classList.remove("要删除的类名")
    ele.classList.toggle("类名") // 切换类名，如果没有这个类名就添加，如果有就删除
    ele.classList.contains("类名") // 判断该类名是否存在，存在就返回 true

    定时器

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var n = 0
    var time = setInterval(function () {
        console.log("n", ++n)
    }, 1000) // 循环定时器

    setTimeout(function () {
        clearInterval(timer)
        // 注意，即使清除了定时器，它仍有值，因此如果要判断定时器是否存在，到时候需要把 timer 清除，如
        console.log(timer) // 此时有值
        timer = null
    }, 8000)
    分享到：

    评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理