zoukankan      html  css  js  c++  java
  • 文档对象模型-DOM(一)

        首先看一下DOM树结构:

    每个节点都是一个对象,拥有方法和属性。

    脚本可以访问以及更新DOM树(不是源代码)。

    针对DOM树的修改都会反映到浏览器。

    访问并更新DOM树需要两个步骤

      一、定位到与需要操作的元素所对应的节点

           访问元素的相关方法和属性

                1.选择单个元素节点方法

                    (1) getElementById() //使用元素的id属性(在页面中应是唯一)

                    (2) querySelector() //使用css选择器,返回第一个匹配的元素

                    (3) 通过使用在DOM树中从第一个元素遍历到另一个元素的方式来选择单独的元素

               2.选择多个元素(当一个DOM方法可以返回多个元素时,会返回一个NodeList)

                    (1) getElementsByClass() //选择所有在class属性中使用了特定值得元素

                    (2) getElementsByTagName() //选择所有使用了指定标记的元素

                    (3) 使用css选择器来选择所有匹配的元素

               3.在元素节点之间遍历

                    (1) parentNode //选择当前元素节点的父节点(只返回一个元素)

                    (2) previousSibling/nextSibling //选择DOM树中的前一个/后一个兄弟节点

                    (3) firstChild/lastChild //返回当前元素的第一个/最后一个子节点

      二、使用它的文本内容、子元素或属性。

               1.访问/更新文本节点

                    使用文本节点的唯一属性 nodeValue 从元素中获取文本

               2.操作HTML内容

                    innerHTML:可以访问子元素和文本内容

                    textContent:仅能访问文本内容

                    createElement(): 创建新节点

                    createTextNode():创建文本节点

                    appendChlid():添加子节点

                    removeChlid():移除子节点

              3.访问或更新属性值

                    ClassName/id:使用它们获取或更新class和id的值

                    hasAttribute():用来检查属性是否存在

                    getAttribute():用来获取属性值

                    setAttribute():用来更新属性值

                    removeAttribute():用来移除属性

  • 相关阅读:
    Python sys.argv用法详解及应用
    Python map() 函数
    Python中enumerate用法详解
    闭包,作用域链,垃圾回收,内存泄露
    jQuery 常用代码集锦
    关于作用域和作用域链最完整的简述
    git 合并commit
    apollo-client
    关于对称加密和解密
    接口校验机制
  • 原文地址:https://www.cnblogs.com/muqiangwei/p/5296740.html
Copyright © 2011-2022 走看看