最直白的DOM探讨(未完待续)

时间:2021-1-8 作者:admin

DOM

首先我们要理解dom:

  • dom就是文档对象模型,是html和xml文档的编程接口,表示多层节点构成的文档,
  • 通过dom它开发者可以添加,删除,修改页面的各个部分,简单说:就是你的页面想要实现增删改查,以及各种交互效果,都需要通过dom来操作,
  • dom就是你操作页面的中介,可以把你的想法精准的传达给页面文档,让他们按照你的想法来实现动作,那么如何精准传达呢,dom是一个由节点构成的层级结构,每个标记都是一个节点,所以可以通过节点,精准的控制想要实现功能的区域

节点层级

  • 上面说了,节点是精准操作页面的东西,那么节点也分为很多类型,分别拥有自己不同的标记,特性和方法,

    • document节点:代表每个文档的根节点,他有唯一的子节点元素,我们称为documentElement,这是最外层的文档元素,其他所有元素都存在这个元素之内,每个文档只能有一个文档元素,xml任何元素都可能称为文档元素
  • DOM中总共有12种节点类型,这些类型都继承一种基本类型

    node 类型节点

  • 我们可以通过常量和节点做比较,如果相等,说明是同一类型节点

if (someNode.nodeType == Node.ELEMENT_NODE){ 
alert("Node is an element."); 
}

小结:这个例子把常量和node的element节点做对比,如果相等,说明常量是元素节点

  • 文档中的节点都与其他节点有关系,这些关系类似家族关系,html>body>页面属性标签,每个节点都有一个childNodes属性和一个NodeList的实例,

    • NodeList是一个类数组对象,他有长度,用于储存可以按照位子存取的有序节点,就是说,一个元素内的子节点,都在这个里面排列,按照顺序可以取到相应的节点,

      例子1:用中括号和对象的方法访问NodeList中的元素

let firstChild = someNode.childNodes[0];//第一个子元素
let secondChild = someNode.childNodes.item(1);//第二个子元素
let count = someNode.childNodes.length;
  • parentNode属性指向Dom树中的父元素,

  • childNodes:firstChild 和 lastChild 分别指向 childNodes 中的第一个和最后一个子节点。 someNode.firstChild 的值始终等于 someNode.childNodes[0]

  • hasChildNodes(),如果返回true。说明节点有一个或者多个子节点

操作节点

  • 因为所有关系指针都是只读的,所以DOM又提供了一些操纵节点的方法。

  • appendChild():用于在 childNodes 列表末尾添加节点。

  • insertBefore() 方法。 这个方法接收两个参数:要插入的节点和参照节点

//添加节点
let returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); // true 
alert(someNode.lastChild == newNode); // true
 // 作为新的第一个子节点插入
returnedNode = someNode.insertBefore(newNode, someNode.firstChild);
alert(returnedNode == newNode); // true 
alert(newNode == someNode.firstChild); // true
  • replaceChild() 方法接收两个参数:要插入的节点和要替换的节点。
  • 是 cloneNode() ,会返回与调用它的节点一模一样的节 点。 cloneNode() 方法接收一个布尔值参数,表示是否深复制。在传入 true 参数时,会进行深复制,即复制节点及其整个子DOM树

本文使用 mdnice 排版

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。