DOM的API

作者: MDIF | 来源:发表于2018-12-17 17:19 被阅读0次

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,需要这么写




下一个的下一个就是啦。

相关文章

  • 【DOM】DOM的操作(增删改查)

    操作DOM的核心就是增删改查 参考: JavaScript DOM编程——API详解 目录 一、节点创建型API ...

  • DOM轻松学习之旅(一)

    DOM简述 DOM 的作用 === 表示 HTML 文档 DOM 提供的 API === 查询,修改 HTML 文...

  • DOM对象和jQuery对象

    (1)、DOM对象只能访问DOM对象的API (2)、jQuery对象只能访问jQuery对象的API (3)、D...

  • 简单模仿两个jQuery API

    这篇博客主要是使用DOM API进行封装模仿jQuery API的实现。在平常写代码时常常会发现DOM API在大...

  • 12 DOM2 和 DOM3

    本章内容 DOM2 和 DOM3 的变化 操作样式的 DOM API DOM 遍历与范围 12.1 DOM 变化 ...

  • DOM常用API

    Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作...

  • DOM API

    DOM重点 搜索归纳,以掌握 DOM 基本思想 DOM 的作用 === 表示 HTML 文档 DOM提供的 API...

  • API--Events

    Events API是其他所有API工作的基础模块。 先看看DOM模型的Events: DOM是基于用户交互的用户...

  • DOM的API

    document.createElement(tagName) 创建一个由tagName指定的HTML元素,需要注...

  • DOM API

    课堂笔记 DOM(document,object,model)的作用是通过构造函数将网页文档里的标签转化为对象,这...

网友评论

      本文标题:DOM的API

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