🟡JavaScriptDOM

本文最后更新于：2024年4月25日 上午

节点类型

Node类型

🌿属性

属性 值
nodeValue 节点值
nodeName 节点名称
nodeType 节点类型
childNodes 子节点信息
hasChildNodes 是否有子节点(返回布尔值)
parentNode 指向父节点
previousSibling 指向上一同级节点
nextSibling 指向下一同级节点
firstChild 指向子节点第一个节点
lastChild 指向子节点最后一节点
ownerDocument 指向文档节点

🌿nodeType

  1. Node.ELEMENT_NODE 元素节点
  2. Node.ATTRIBUTE_NODE 已弃用
  3. Node.TEXT_NODE 元素或属性的文本
  4. Node.CDATA_SECTION_NODE-
  5. Node.ENTITY_REPERENCE_NODE 已弃用
  6. Node.ENTITY_NODE 已弃用
  7. Node.PROCESSING_INSTRUCTION_NODE
  8. Node.COMMENT_NODE 注释节点
  9. Node.DOCUMENT_NODE
  10. Node.DOCUMENT_TYPE_NODE
  11. Node.DOCUMENT_FRAGMENT_NODE
  12. Node.NOTATION_NODE 已弃用

🌿nodeName

节点名,元素节点值为标签名

🌿nodeValue

节点的内容,元素节点为null

🌿节点父子

🌿节点方法

  • appendChild(newNode)------------------------在子节点最后插入节点,返回newNode
  • insertBefore(newNode, afterNode)------在afterNode前插入节点,返回newNode
  • replaceChild(newNode, oldNode)---------替换oldNode节点,返回oldNode
  • removeChild(oldNode)------------------------移除oldNode节点,返回oldNode
  • cloneNode(Boolean)---------------------------返回复制节点,布尔值表示是否深拷贝
  • normalize()------------------------------------后代节点合并同级相邻文本节点并删除空文本节点

Document类型

🍍属性

属性 值
nodeType 9
nodeName #document
nodeValue null
parentNode null
ownerDocument null
documentElement 指向<html>
body 指向<body>
doctype 指向<!doctype>
title 网页标题(修改有效但不改<title>)
URL 网页完整URL
domain 域名
referrer 导航前一页面URL(无则为空字符)

🍍元素获取

  • getElementById('id')-----------------------第一个id属性匹配的元素
  • getElementsByTagName('tagName')------标签名匹配的元素集合
  • anchors-----------------------------------------有name属性的a标签的集合
  • applets 已弃用
  • forms--------------------------------------------form标签的集合
  • images------------------------------------------img标签的集合
  • links--------------------------------------------有href属性的a标签的集合

🍍Selector API

  • querySelector('css选择器')--------------后代中第一个匹配的节点
  • querySelectorAll('css选择器')---------当前后代所有匹配的节点集合(非动态)
  • matches('css选择器')-----------------------返回是否有匹配

css选择器错误会报错

🍍网页输出流

Element类型

🥝属性

属性 值
nodeType 1
nodeName 标签名
nodeValue null
parentNode 文档节点或元素节点
tagName 标签名

🥝属性操作

  • getAttribute('key')--------------------获取对应属性值
  • setAttribute('key', 'value')--------设置属性值,属性名自动转小写
  • removeAttribute('key')-----------------移除属性

属性名不区分大小写

🥝attributes属性

🥝元素创建

createElement('tagName')创建并返回一个元素节点,挂载前也可添加属性

1
2
3
const Blog = document.createElement('a')     // 创建一个a元素
Blog.href = 'https://jon-a-than.github.io'   // 添加属性
document.appendChild(Blog)                   // 挂载到DOM

Text类型

JavaScript > DOM
#JavaScript #DOM
🟡JavaScriptDOM
https://qingshaner.com/JavaScriptDOM/
作者
清山
发布于
2022年1月30日
许可协议