zoukankan      html  css  js  c++  java
  • DOM及其扩展

    一、DOM简介
    DOM的级别共有两级别:
    W3C在98年10月标准化了DOM第一级,定义了基本的接口。
    00年11月标准化了DOM的第二级,对接口进行升级,并定义了文档事件和CSS样式表的标准API。
     
     
    文档元素:
    当文档节点只有一个子节点,即<html>元素的时候,我们称之为文档元素。
     
    节点属性:
    nodeName
    NodeType
    NodeValue
     
    节点关系:
    childNodes属性,其中包括这一个NodeList对象,但他并不是一个数组的实例。
     
    遍历文档树:
    当前节点的最后一个子节点——obj.lastChild
    当前节点的父节点——obj.parentNode
    那么,如果想要获取爷爷节点话,怎么办呢?就是父节点的父节点。
     
     
     
    二、DOM的操作
    (1)创建节点
    1、创建新节点
    createElement()
    createTextNode()
    appendChild()
    2、创建多个节点
    使用循环语句,常见多个节点
    3、创建多个节点——碎片节点
    createDocumentFragment()方法
     
    (2)插入节点
    insertBefore(new,ref)
    在ref节点前插入new节点
    js没有提供insertAfter方法,我好像明白为什么没有这个方法的原因了。因为如果想要在某个节点后面插入新的节点,其实就是在该节点的容器中插入新的节点,只要找到这个节点所在的容器,然后使用append()方法或appendChild()方法,就能达到这样的效果了。
    目前还未发现append方法和appendChild方法的区别。
     
    (3)复制节点
    obj.cloneNode(deep)
    deep为布尔值,深度复制或简单复制。
     
    (4)删除与替换节点
    obj.removeChild(oldChild)
    obj.replaceChild(new,old)
    obj是该节点所在的父节点。
     
    三、DHTML
    通过DOM可以获取网页对象,通过DHTML对象模型的方法,也可以获取网页对象。
    优点:可以不必了解文档对象墨香的具体层次结构,直接得到网页中所需要的对象。
    innerHTML、innerText、outerHTML、outerText四个属性可以很方便的读取和修改HTML元素内容。
     
     
     二、document类型
     
     
     
     

     DOM的扩展

    一、选择符API

    querySelector():只返回第一个元素。

    querySeletorAll():返回的是nodelist。要得到每一个元素,可以使用item,也可以使用方括号语法。

    二、H5

    1、与类相关的扩展 

    getElemtenByClassName()。

    classList属性:

     
     
     
     
  • 相关阅读:
    MongoDB
    uni-app同步缓存值 设置 读取 删除
    uni-app路由跳转
    uni-app在小程序上遇见的坑(a-b页面频繁跳转)
    unia-app页面生命周期详解
    uni-app之页面跳转(点击按钮进行页面跳转)
    02如何直接使用uni-app中提供的模板之公告滚动
    01-组件轮播
    uni-app如何只用插件市场中的插件
    uni-app在线引入阿里字体图标库
  • 原文地址:https://www.cnblogs.com/qingshanyici/p/10858246.html
Copyright © 2011-2022 走看看