DOM的API

document.createElement(tagName)

创建一个由tagName指定的HTML元素,需要注意这仅仅是创建出来,并没有加到HTML文档中,需要另一个API来加入到文档。

var div = document.createElement('div')//创建一个<div>
document.body.appendChild(div)//将div添加到body中

上面的appendChild可将创建的元素添加到文档的父元素中。

Node.parentNode

返回指定节点在DOM书中的父节点



Node.parentElement

返回指定节点的父元素节点。如果父元素不是element(nodeType !== 1)则返回null。




因为HTML标签的父节点不再是元素,所以返回了null。

parentNode和parentElement的区别

parentNode返回所有类型的节点,
parentElement如果父元素不是element(nodeType !== 1)则返回null。

Node.nodeType

返回指定节点的节点类型,返回的一个整数。

常量 返回数值 描述
Node.ELEMENT_NODE 1 元素节点,如<div>
Node.TEXT_NODE 3 Element或者Attribute中的文字
Node.PROCESSING_INSTRUCTION_NODE 7 用于XML文档的ProcessingInstruction,如<?xml-stylesheet ... ?>声明
Node_COMMENT_NODE 8 Comment节点
Node_DOCUMENT_NODE 9 Document节点
Node_DOCUMENT_TYPE_NODE 10 DocumentType节点,如<!DOCTYPE html>
Node_DOCUMENT_FRAGMENT_NODE 11 DocumentFragment节点
p.nodeType

返回值为1说明p是一个元素。

ParentNode.children

返回一个元素的所有子标签(不包括节点类型为文本(nodeType === 3)的标签)


div.children

div.children

ParentNode.childNodes

返回一个元素的所有子标签(包括节点类型为文本(nodeType === 3)的标签)


div.childNodes

div.childNodes

Node.nextSibling

返回其父节点的childNodes列表中紧跟在其后面的一个节点(它的第一个弟弟节点),如果它是最后一个节点(最小的),返回null。




咦怎么和想象中的不一样,不是应该返回<span>吗?看上一个例子可以知道,div的childNodes列表中p的下一个是text。想获取到span,需要这么写




下一个的下一个就是啦。
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在介绍DOM的API之前,先介绍下一些DOM基本概念。 DOM,文档对象模型,把文档树当成对象来看的模型。DOM ...
    江湖竖子阅读 5,092评论 0 3
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,091评论 0 7
  • 原文 链接 关注公众号获取更多资讯 一、基本类型介绍 1.1 Node类型 DOM1级定义了一个Node接口,该接...
    前端进阶之旅阅读 9,374评论 7 34
  • 基本概念 DOM DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Ob...
    许先生__阅读 4,340评论 0 1
  • 一、基本概念 1.1、DOM DOM是JS操作网页的接口,全称为“文档对象模型”(Document Object ...
    周花花啊阅读 8,529评论 0 6

友情链接更多精彩内容