js DOM

优秀博客

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

DOM规定了可对页面进行的操作：

  1. 改变页面中的所有 HTML 元素
  2. 改变页面中的所有 HTML 属性
  3. 改变页面中的所有 CSS 样式
  4. 增删 HTML 元素和属性
  5. 对 HTML 事件作出响应
  6. 创建新的 HTML 事件

Document对象

查找元素

方法描述
getElementById(id)通过元素 id 来查找元素（返回第一个）
getElementsByName(name)返回带有指定名称的对象的集合
getElementsByTagName(tag)通过标签名来查找元素集合
getElementsByClassName(name)通过类名来查找元素集合(不适用于 Internet Explorer 8 及其更早版本)
querySelector(selecter)返回文档中匹配指定的CSS选择器的第一元素
querySelectorAll(selecter)通过匹配指定 CSS 选择器元素集合(不适用于 Internet Explorer 8 及其更早版本)

改变HTML元素

属性描述
.innerHTML = new html content改变元素的 inner HTML
.attribute = new value改变 HTML 元素的属性值
.setAttribute(attribute, value)改变 HTML 元素的属性值
.style.property = new style改变 HTML 元素的样式 （style也是元素的属性）
.classList类列表可进行增删类

创建/删除 DOM节点

方法描述
document.createElement(“标签名”)创建 HTML 元素
document.createTextNode(“文本节点内容”)
element.removeChild(节点)删除 HTML DOM节点
element.appendChild(节点)追加 HTML 元素
element.replaceChild(newnode,oldnode)替换 HTML 元素
document.write(text)写入 HTML 输出流

添加新节点

必须首先创建这个元素（元素节点），然后将其追加到已有元素。

var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
//var child = document.getElementById("p1");
//element.insertBefore(para, child);

删除节点

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
//child.parentNode.removeChild(child);

替换节点

var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

查找 HTML 对象

属性描述DOM
document.anchors返回拥有 name 属性的所有 <a> 元素。1
document.applets返回所有 <applet> 元素 （HTML5 不建议使用）1
document.baseURI返回文档的绝对基准 URI3
document.body返回 <body> 元素1
document.cookie返回文档的 cookie1
document.doctype返回文档的 doctype3
document.documentElement返回 <html> 元素3
document.documentMode返回浏览器使用的模式3
document.documentURI返回文档的 URI3
document.domain返回文档服务器的域名1
document.embeds返回所有 <embed> 元素3
document.forms返回所有 <form> 元素1
document.head返回 <head> 元素3
document.images返回所有 <img> 元素1
document.implementation返回 DOM 实现3
document.inputEncoding返回文档的编码（字符集）3
document.lastModified返回文档更新的日期和时间3
document.links返回拥有 href 属性的所有 <area> 和 <a> 元素1
document.readyState返回文档的（加载）状态3
document.referrer返回引用的 URI（链接文档）1
document.scripts返回所有 <script> 元素3
document.strictErrorChecking返回是否强制执行错误检查3
document.title返回 <title> 元素1
document.URL返回文档的完整 URL1

HTML输出流

document.write() 可用于直接写入 HTML 输出流

修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性

对事件做出响应

onclick=JavaScript
//可为于元素标签，或通过DOM

HTML事件与事件监听

详细链接

DOM 导航

W3C
整个HTML文档可以理解为是一颗节点树
文档为根节点
在这里插入图片描述

节点关系

父、子和同胞，parent、child 以及 sibling

节点之间导航

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling 其父节点的 childNodes 列表中紧跟在其后面的节点
  • previousSibling 前一个兄弟节点

节点与节点值

标签下的文本不是标签节点值
文本是文本节点
文本节点的值 能够通过节点的 innerHTML/.firstChild.nodeValue/.firstChild.nodeValue 属性进行访问

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 等同于标签名
  • 属性节点的 nodeName 是属性名称
  • 文本节点的 nodeName 总是 #text
  • 文档节点的 nodeName 总是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined
  • 文本节点的 nodeValue 是文本文本
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

节点类型例子
ELEMENT_NODE1<h1 class="heading">W3School</h1>
ATTRIBUTE_NODE2class = “heading” （弃用）
TEXT_NODE3W3School
COMMENT_NODE8<!-- 这是注释 -->
DOCUMENT_NODE9HTML 文档本身（<html> 的父）
DOCUMENT_TYPE_NODE10<!Doctype html>

DOM 集合 HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象
可以像数组一样，通过下标访问，但其不是数组
属性length 集合的长度

DOM 节点列表 NodeList 对象

与 HTMLCollection 对象几乎相同

  • 使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
  • 所有浏览器都会为 childNodes 属性返回 NodeList 对象。
  • 大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象

添加移除class类名

ele.classList.remove('classname')
ele.classList.add('className')

getComputedStyle 获得计算样式

获取注释节点demo

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body><!-- 阿八八八八八 -->
  <p>分割</p>
  <!-- 结束累 -->
  <script>
    // let oComment = document.body.firstChild;
    // console.log(oComment.nodeName, oComment.nodeType, oComment.nodeValue) //#comment 8 我是注释
    let cl = document.body.childNodes
    let clarr = Array.from(cl)
    console.log(cl.constructor, clarr.constructor)
    clarr.forEach(item => {
      if (item.nodeType === 8) {
        console.log(item.nodeValue)
      }
    })
  </script>
</body>

</html>
posted @   海胆Sur  阅读(2)  评论(0)  编辑  收藏  举报  
相关博文：
·  JS JQuery与JavaScript比较
·  js DOM 事件 事件监听
·  js-dom
·  HTML DOM
·  HTML DOM（Document Object Model 文档对象模型）
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳，地球，月球 运作规律
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae