zoukankan      html  css  js  c++  java
  • javascriptDOM节点

    DOM把层次中的每一个对象都称之为节点(NODE),以HTML超文本标记语言为例:整个文档的一个根就是<html>,在DOM中可以使用
    document.documentElement来访问它,它就是整个节点树的根节点(ROOT)

    子节点

    一般意义上的节点,根节点以下最大子节点就是主文档区<body>了,要访问到body标签,在脚本中应该写:
    document.body
    body区以内所有的文本及HTML标签都是文档的节点,分别称为文本节点、元素节点(或者叫标签节点),大家知道HTML说到底只是文本而矣,
    不论怎么样的网页必然由这两个节点组成,也只能由这两个节点组成
    节点之间的关系:
    节点之间的关系也是DOM中最重要的一个关节,如何正确地引用到节点对象,一定要清楚节点树各个节点的相互描述方式,在DHTML里,
    Javascript脚本就用了各个节点对象的一整套方法和属性去描述另外的节点对象。

    节点的绝对引用:
    返回文档的根节点
    document.documentElement
    返回当前文档中被击活的标签节点
    document.activeElement
    返回鼠标移出的源节点
    event.fromElement
    返回鼠标移入的源节点
    event.toElement
    返回激活事件的源节点
    event.srcElement
    节点的相对引用:(设当前对节点为node)
    返回父节点
    node.parentNode
    node.parentElement
    返回子节点集合(包含文本节点及标签节点)
    node.childNodes
    返回子标签节点集合
    node.children
    返回子文本节点集合
    node.textNodes
    返回第一个子节点
    node.firstChild
    返回最后一个子节点
    node.lastChild
    返回同属下一个节点
    node.nextSibling
    返回同属上一个节点
    node.previousSibling
    节点的各种操作:(设当前的节点为node)
    新增标签节点句柄:
    document.createElement_x(sNode) //参数为要新添的节点标签名,例:newnode=document.createElement_x("div");
    1、添加节点:
    追加子节点:
    node.appendChild(oNode) //oNode为生新增的节点句柄,例:node.appendChild(newnode)
    应用标签节点
    node.applyElment(oNode,sWhere)//oNode为生新增的节点句柄,sWhere有两个值:outside / inside,加在当前节点外面还是里面
    插入节点
    inode.insertBefore()
    node.insertAdjacentElement()
    node.replaceAdjacentText()
    2、修改节点:
    删除节点
    node.remove()
    node.removeChild()
    node.removeNode()
    替换节点
    node.replaceChild()
    node.replaceNode()
    node.swapNode()

    2、复制节点:
    返回复制复制节点引用
    node.cloneNode(bAll)//bAll为布尔值,true / false 是否克隆该节点所有子节点
    3、节点信息
    是否包含某节点
    node.contains()
    是否有子节点
    node.hasChildNodes()

  • 相关阅读:
    App分享微信小程序
    PHP-FFMpeg 操作视频/音频文件 (转)
    用户画像
    phpcms中的RBAC权限系统
    PHPExcel生成excel
    OPNET中节点模型中包流的索引号的含义
    删除opnet之前保存或打开的目录后每次打开总会提示warning
    opnet 的学习方法有感
    win10:两款轻量级美化软件使用技巧(StartlsBack++与RocketDock)
    任务栏透明
  • 原文地址:https://www.cnblogs.com/UniverseWang/p/6980100.html
Copyright © 2011-2022 走看看