您的位置: 首页  >  文章  >  前端DOM学习总结(一)

前端DOM学习总结(一)

分类: 文章 • 2023-10-13 11:40:06

感觉自己的DOM基础很不扎实,最近在看<<javaScript高级程序>>,学习这一模块,下面是自己的学习成果.

  • 节点层次
  • Node类型
  • 节点关系
  • 操作节点

节点层次

DOM 可将任何 HTML , XML 描绘成由多层节点构成的结构.

节点分为几种不同的类型,每种类型分表表示文档中不同的信息及标记.

每个节点都拥有各自的特点,数据 和 方法,节点之间都存在某种关系.

节点类型共有 12 种,他们都继承自 同一个 基类型 Node类型 (不一定是直接继承)

Document.__proto__
ƒ Node() { [native code] }

Element.__proto__
ƒ Node() { [native code] }

Text.__proto__.__proto__
ƒ Node() { [native code] }

1.Node类型

Node是一个构造函数,或者叫类

Node
ƒ Node() { [native code] }

每一个节点(Node子类的实例)都直接或间接的继承Node类,在Node类型的基础上定义了Node接口 , 所以所有节点类型都共享Node类的属性和方法.

  • nodeType:节点的类型
  • nodeName:节点的名字
  • nodeValue:节点的value
  • 节点关系的系列方法(见下)
var node = document.getElementById('box');
//node是一个节点类型实例

node.nodeType //(共12中类型)
node.nodeName
node.nodeValue

2.节点关系

前面说了,文档中所有的节点都存在关系.

关系指针都是只读的,不可修改

每一个节点都有

属性

  • childNodes
  • parentNode
  • ownerDocument

方法

  • hasChildNodes()

childNodes 返回值是NodeList对象,他是 类数组对象 (不做过多解释),

parentNode 返回值是Node节点对象

ownerDocument 返回值#document,节点对象

hasChildNodes() 有无子节点,返回值Boolean 比查询length更好

如何访问保存在NodeList中的节点?

var firstChild = someNode.childNodes[0]   //最常用
var firstChild = someNode.childNodes.item[0]
var length = someNode.childNodes.length

前端DOM学习总结(一)

3.操作节点

上文说节点的关系指针是不可以改变的,所以需要操作dom本身.

下面的操作都是操作 子节点 的

  • appendChild()
  • insertBefore()
  • replaceChild()
  • removeChild()

appendchild()
用于向childNodes的末尾添加一个节点,
添加节点后,childNodes的新增节点, 父节点 父节点的最后一个节点的指针都会相应的更新
返回值 新增节点
如果新增节点是文档中已存在的一部分,那结果就是将此节点从原来的位置转移到新的位置.
文档中同一个节点 不可能存在文档中不同的位置,

insertBefore()
要插入到childNodes列表的某一个特定位置上,接受两个参数,
arg1:要插入的父节点,
arg2:参考节点 若为null 则同appendChild()一样
返回值:插入节点

replaceChild()
arg1:要插入的节点
arg2:要替换的节点
返回值:替换节点
注意:使用此方法, 该节点的所有关系指针都会被从他替换的节点复制过来,被替换的节点仍然存在于文档中,但是他没有了自己的位置.

removeChild()
移除节点.
arg:要移除的节点,
返回值:移除节点

其他方法:
cloneNode()
normalize()

相关推荐