DOM基础

作者: 数据研究bot | 来源:发表于2018-10-12 12:52 被阅读6次
  • 原理分析:HTML加载完毕,渲染引擎会在内存中把HTML文档,生成一个DOM树,获取DOM上的元素节点后,操作时修改的便是该元素的属性。
  • 我们可以通过DOM节点来访问与之相关的其他节点,比如父节点、兄弟节点和子节点。


以上就是获取节点的方式,可以调用这些方法获取相应的节点,需要注意兼容性的问题。另外,由于childNodes方法会获取DOM树中所有的节点(包括元素节点、文本节点等)因此需要进行判断,nodeType值为1时,便可获取到所有的元素节点。


  • 节点的操作:我们可以利用这些方法对节点进行动态的增删操作,具体方法如下。

注意事项:

  1. 创建节点后,一定要用appendChild的方法来承接节点,否则系统无法判断出创建节点的位置,结果自然也无法展示出。
  2. 克隆节点的方法为:新节点=要复制的节点.cloneNode(参数) ; 参数可选复制节点
    参数为布尔值,如果是false则为浅拷贝(只能拷贝一层元素)如果是true则为深拷贝(可以拷贝多层元素)
  • 节点属性的操作
  1. 获取:getAttribute(名称)
  2. 设置:setAttribute(名称, 值)
  3. 删除:removeAttribute(名称)

相关文章

  • per-courseDOM介绍

    DOM 文档对象模型 D 表示文档,DOM的物质基础O 表示对象,DOM的思想基础M 表示模型,DOM的方法基础...

  • javascript基础系列:DOM相关的技术知识点

    javascript基础系列:DOM相关的技术知识点 DOM及其基础操作 DOM: document object...

  • DOM基础

    DOM基础 第一章:DOM概述 1.1DOM以及节点概念 ​ 文档对象模型DOM(Document Object ...

  • 虚拟DOM

    虚拟DOM 基础概念: virtual DOM是对真实DOM的描述和映射 当Virtual DOM改变后,我们得到...

  • HTML DOM基础解析

    DOM基础知识 1. HTML DOM简介 DOM 是 Document Object Model(文档对象模型)...

  • Dom基础1

    DOM基础 DOM简介、DOM标准、DOM节点 获取元素的子节点:childNodes、兼容性问题火狐不兼容,可以...

  • React基础篇之虚拟DOM

    Hello World JS创建虚拟DOM JSX创建虚拟DOM 虚拟DOM与真实DOM 下一篇:React基础篇...

  • 19.DOM 进阶

    学习要点: 1.DOM 类型2.DOM 扩展3.DOM 操作内容 DOM 自身存在很多类型,在 DOM 基础课程中...

  • 操作DOM—DOM基础

    一、访问节点 1)相对当前节点访问节点 提示每个节点都有一个childNodes属性,改属性保存着一个nodeLi...

  • JavaScript--DOM基础

    JavaScript--DOM基础 一、DOM查找方法 1.document.getElementById()语法...

网友评论

      本文标题:DOM基础

      本文链接:https://www.haomeiwen.com/subject/tijwaftx.html