zoukankan      html  css  js  c++  java
  • DOM入门

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理,处理的结果可以加入到当前的页面。DOM是一种基于树的API文档,它要求在处理过程中整个文档都表示在存储器中。
    W3C DOM 标准被分为 3 个不同的部分:

    核心 DOM - 针对任何结构化文档的标准模型
    XML DOM - 针对 XML 文档的标准模型
    HTML DOM - 针对 HTML 文档的标准模型

    核心DOM模型

    1.获取:在HTML中用Windows对象获取

    (1) windows.document
    (2) document

    2.方法

    (1)获取element对象
    getElementById():根据ID属性值获取对象,id属性值一般唯一
    getElementByTagName:根据元素名称获取元素对象们,返回值是一个数组
    getElementByClassName():根据class属性值获取元素对象们,返回值是一个数组
    getElementByName():根据name属性值获取元素对象们,返回值是一个数组

    (2)创建其他DOM对象
    adoptNode(sourcenode) 从另一个文档向本文档选定一个节点,然后返回被选节点。
    createAttribute(name) 创建拥有指定名称的属性节点,并返回新的 Attr 对象。
    createAttributeNS(uri,name) 创建拥有指定名称和命名空间的属性节点,并返回新的 Attr 对象。
    createCDATASection() 创建 CDATA 区段节点。
    createComment() 创建注释节点。
    createDocumentFragment() 创建空的 DocumentFragment 对象,并返回此对象。
    createElement() 创建元素节点。
    createElementNS() 创建带有指定命名空间的元素节点。
    createEvent() 创建新的 Event 对象。
    createEntityReference(name) 创建 EntityReference 对象,并返回此对象。
    createExpression() 创建一个XPath表达式以供稍后计算。
    createProcessingInstruction() 创建 ProcessingInstruction 对象,并返回此对象。
    createRange() 创建 Range 对象,并返回此对象。

    3.属性

    Element:元素对象

    (1)获取/创建:通过document来获取和创建
    (2)方法:
    removeAttribute() 删除指定的属性。elementNode.removeAttribute(name)
    getAttribute() 返回属性的值。elementNode.getAttribute(name)
    getAttribute() 返回属性的值。elementNode.setAttribute(name,value)

    Node 对象

    Node 对象是整个 DOM 的主要数据类型。
    节点对象代表文档树中的一个单独的节点。
    节点可以是元素节点、属性节点、文本节点,或者也可以是“节点类型”那一节中所介绍的任何一种节点。
    请注意,虽然所有的对象均能继承用于处理父节点和子节点的属性和方法,但是并不是所有的对象都拥有父节点或子节点。例如,文本节点不能拥有子节点,所以向类似的节点添加子节点就会导致 DOM 错误。
    IE: Internet Explorer, F: Firefox, O: Opera, W3C: 万维网联盟 (因特网标准)

    方法:
    appendChild() 向节点的子节点列表的结尾添加新的子节点。appendChild(newchild)
    removeChild() 删除(并返回)当前节点的指定子节点。nodeObject.removeChild(node)
    replaceChild() 用新节点替换一个子节点。 nodeObject.replaceChild(new_node,old_node)

    属性:
    parentNode 返回节点的父节点。nodeObject.parentNode
    childNodes 属性可返回指定节点的子节点的节点列表。nodeObject.childNodes

    补充:
    超链接中:herf=""表示返回本页面(相当于刷新)
    超链接功能
    1.可以被点击:样式
    2.点击后跳转到herf指定的url
    需求:保留1功能,去掉2功能
    实现:herf="javascript:void(0);"
  • 相关阅读:
    解决ios下iframe不能滑动
    每天一题之js执行顺序
    async函数的返回值
    小程序自定义Tabbar
    windows10配置vue3项目踩坑记录
    vue2+循环链表解决一个历史趣题
    小程序内协议使用的三种方法
    HDFS的java操作
    HDFS工作原理笔记
    win10已经编译好的hadoop2.6.5
  • 原文地址:https://www.cnblogs.com/ruonan1997/p/14132394.html
Copyright © 2011-2022 走看看