Javascript中DOM常用方法和属性总结

最新推荐文章于 2024-07-08 18:01:35 发布

ZSK6

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量1.8k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43231248/article/details/128151836

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

简言

我们知道JavaScript分为三大部分：dom、bom和ecmascrip。其中ecmascript是核心语法，但dom也不容忽视，今天我们来总结下dom的常用方法和属性。

DOM介绍

文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。

DOM接口

这里的dom接口，包含html自定义接口的扩展属性和方法。
Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是 DOM 树 (en-US)。DOM 树包含了像 <body>、<table> 这样的元素，以及大量其它元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL，如何在文档中创建一个新的元素这样的问题。

Document常用属性

此接口也继承自 Node 和 EventTarget 接口。
部分属性表：

属性	描述	类型
Document.activeElement	返回一个目前处于聚焦状态的 Element(元素对象)。	只读
Document.body	返回当前文档的 <body> 或 <frameset> 节点。
Document.characterSet	返回文档正在使用的字符集。	只读
Document.children	返回当前文档的子元素。	只读
Document.documentElement	返回当前文档的直接子节点。对于 HTML 文档，HTMLHtmlElement 对象一般代表该文档的<html> 元素。	只读
Document.documentURI	以字符串的类型，返回当前文档的路径。	只读
Document.firstElementChild	返回当前文档的第一个子元素。	只读
Document.hidden	返回一个布尔值，表明当前页面是否隐藏。	只读
Document.lastElementChild	返回当前文档的最后一个子元素。	只读
Document.pictureInPictureEnabled	若画中画特性可用，则返回 true。	只读
Document.scrollingElement	返回对滚动文档的 Element 的引用。	只读

HTMLDocument 的扩展

HTML 文件的 Document 接口继承自 HTMLDocument 接口，或扩展了这些属性：

属性	描述	类型
Document.cookie	返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。	可读写
Document.defaultView	返回一个对 window 对象的引用。	可读写
Document.location	返回当前文档的 URI。	只读
Document.referrer	返回来源页面的 URI。	只读
Document.URL	以字符串形式返回文档的地址栏链接。	只读
Document.title	获取或设置当前文档的标题。	可读写

Document方法

该接口同样继承了 Node 和 EventTarget 接口。

Document.adoptNode()

Document.adoptNode() — 从其他的 document 文档中获取一个节点。该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的ownerDocument 属性会变成当前的 document 文档。之后你可以把这个节点插入到当前文档中。
语法

node = document.adoptNode(externalNode);
node — 导入当前文档的新节点。新节点的 parentNode 是 null, 因为它还没有插入当前文档的文档树中，属于游离状态。
externalNode — 将要从外部文档导入的节点。
该方法不但可以从 iframe 中获取 adopt 元素，在同一 document 文档下的不同两个元素中也可以使用，该方法可以实现从左边栏列表中选取某些元素加载到右边栏的功能。

示例：
穿梭效果示例

Document.append()

在文档的最后一个子节点后插入一个 Node 对象或字符串对象的集合。
语法

append(param1)
append(param1, param2)
append(param1, param2, /* … ,*/ paramN)
param1, …, paramN
可以在后面插入多个Node 对象或字符串对象的集合。

Document.createAttribute()

创建一个新的 Attr 对象并返回。Document.createAttribute() 方法创建并返回一个新的属性节点。这个对象创建一个实现了 Attr 接口的节点。这个方式下 DOM 不限制节点能够添加的属性种类。
语法

attribute = document.createAttribute(name)
name
属性的属性名。

该方法的返回值是一个类型为 Attr 的节点。你可以通过为该节点的 nodeValue 属性赋值来设置该属性节点的属性值，也可以使用常用的 setAttribute() 方法来替代该方法。

Document.createElement()

用给定标签名创建一个新的元素。
在 HTML 文档中，Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。
语法

var element = document.createElement(tagName[, options]);
tagName
指定要创建元素类型的字符串，创建元素时的 nodeName 使用 tagName 的值为初始化，该方法不允许使用限定名称 (如：“html:a”)，在 HTML 文档上调用 createElement() 方法创建元素之前会将tagName 转化成小写，在 Firefox、Opera 和 Chrome 内核中，createElement(null) 等同于 createElement(“null”)
options(可选配置项)
一个可选的参数 ElementCreationOptions 是包含一个属性名为 is 的对象，该对象的值是用 customElements.define() 方法定义过的一个自定义元素的标签名。

示例：

<!DOCTYPE html>
<html>
<head>
  <title>||Working with elements||</title>
</head>
<body>
  <div id="div1">The text above has been created dynamically.</div>
  <script>
	document.body.onload = addElement;

	function addElement () {
	  // 创建一个新的 div 元素
	  let newDiv = document.createElement("div");
	  // 给它一些内容
	  let newContent = document.createTextNode("Hi there and greetings!");
	  // 添加文本节点 到这个新的 div 元素
	  newDiv.appendChild(newContent);
	
	  // 将这个新的元素和它的文本添加到 DOM 中
	  let currentDiv = document.getElementById("div1");
	  document.body.insertBefore(newDiv, currentDiv);
	}
  </script>
</body>
</html>

Document.getElementById()

返回以id标识元素的引用对象。Document的方法 getElementById()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。getElementById() 只有在作为 document 的方法时才能起作用，而在 DOM 中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。
语法

var element = document.getElementById(id);
element是一个 Element 对象。如果当前文档中拥有特定 ID 的元素不存在则返回 null.
id是大小写敏感的字符串，代表了所要查找的元素的唯一 ID.

Document.getElementsByClassName()

返回具有给定类名的元素列表。
返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时，会搜索整个 DOM 文档，包含根节点。你也可以在任意元素上调用getElementsByClassName() 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。
** 语法 **

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);
elements 是一个实时(集合)，包含了找到的所有元素。
names 是一个字符串，表示要匹配的类名列表（注意不要带.）；类名通过空格分隔
getElementsByClassName 可以在任何元素上调用，不仅仅是 document。调用这个方法的元素将作为本次查找的根元素。

elements类似为函数中的arguments的类数组，通常我们叫他伪数组，详情请查看cdn官网HTMLCollection。

Document.getElementsByTagName()

返回具有给定标签名的元素列表。返回一个包括所有给定标签名称的元素的 HTML 集合HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的 HTML 集合是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName()。
** 语法**

var elements = document.getElementsByTagName(name);
elements 是一个由发现的元素出现在树中的顺序构成的动态的 HTML 集合 HTMLCollection (但是看下面的提示) 。
name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

当在一个 HTML 文件上执行时， getElementsByTagName() 会在执行前把参数转换为小写字母。document.getElementsByTagName() 类似于 element.getElementsByTagName()，除了它会搜索整个文档这点。

Document.querySelector()

返回文档中与指定的选择器匹配的第一个元素节点。文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。
** 语法**

element = document.querySelector(selectors);
selectors
包含一个或多个要匹配的选择器的 DOM 字符串DOMString。该字符串必须是有效的 CSS 选择器字符串；如果不是，则引发SYNTAX_ERR异常。

Document.querySelectorAll()

返回包含文档中与指定的选择器匹配的所有元素节点的列表。返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
** 语法**

elementList = parentNode.querySelectorAll(selectors);
selectors
一个 DOMString 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 CSS selector 如果不是，会抛出一个 SyntaxError 错误

返回值：一个静态 NodeList，包含一个与至少一个指定选择器匹配的元素的Element对象，或者在没有匹配的情况下为空NodeList。NodeList 对象是节点的集合，NodeList 不是一个数组，是一个类似数组的对象 (Like Array Object)。虽然 NodeList 不是一个数组，但是可以使用 forEach() 来迭代。你还可以使用 Array.from() 将其转换为数组。
不过，有些浏览器较为过时，没有实现 NodeList.forEach() 和 Array.from()。你可以用 Array.prototype.forEach() 来规避这一问题。它和HTMLCollection比较相似，不过多了一些方法，可以直接遍历，详情请看NodeList

Document.replaceChildren()

用一个指定的新的子节点集合替换替换文档中现有的子节点。
** 语法 **

replaceChildren(param1)
replaceChildren(param1, param2)
replaceChildren(param1, param2, /* … ,*/ paramN)
param1, …, paramN
一组Node或字符串对象，用于替换Document的现有子对象。如果没有指定替换对象，则清空Document中的所有子节点。

replaceChildren()提供了一种非常方便的机制来清空文档的所有子元素。在不指定任何参数的情况下在文档中调用它:

document.replaceChildren();
document.children; // HTMLCollection []

Document.hasFocus()

若焦点目前位于给定的文档内，则返回 true。Document.hasFocus() 方法返回一个 Boolean，表明当前文档或者当前文档内的节点是否获得了焦点。该方法可以用来判断当前文档中的活动元素是否获得了焦点。当查看一个文档时，当前文档中获得焦点的元素一定是当前文档的活动元素，但一个文档中的活动元素不一定获得了焦点.。例如，一个在后台的窗口中的活动元素一定没有获得焦点。
语法

focused = document.hasFocus();
返回值：如果当前文档的活动元素获得了焦点，返回 true，否则返回 false。

示例：

<!DOCTYPE html>
<html>
<head>
  <style type='text/css'>
    #message { font-weight: bold; }
  </style>

<script type='text/javascript'>
      setInterval("CheckPageFocus()", 200);

      function CheckPageFocus() {
            var info = document.getElementById("message");
           if (document.hasFocus()) {
             info.innerHTML = "该页面获得了焦点.";
            }
            else {
             info.innerHTML = "该页面没有获得焦点.";
           }
      }

    function OpenWindow() {
           window.open ("http://developer.mozilla.org/", "mozdev",
                     "width=640, height=300, left=150, top=260");
    }
</script>
</head>

<body>
 document.hasFocus 演示<br /><br />
<div id="message">等待用户操作</div><br />
<button onclick="OpenWindow()">打开一个新窗口</button>
</body>
</html>

事件

列出了使用 addEventListener() 或为接口的事件处理器属性 oneventname 赋值的方式来监听的事件。

事件名	作用	补充
beforescriptexecute	在静态的 <script> 开始执行脚本时触发。
scroll	在滚动文档视图或元素时触发。
visibilitychange	在变前的内容变为可见、隐藏时触发。
wheel	在用户在点击设备（通常为鼠标）上转动滚轮时触发。
动画事件
animationcancel	在动画意外中止时触发。
animationend	在动画正常完成时触发。
animationiteration	在动画迭代完成时触发。
animationstart	在动画开始时触发。
剪切板事件
copy	在用户通过浏览器的用户界面使用复制操作时触发。
cut	在用户通过浏览器的用户界面使用剪切操作时触发。
paste	在用户通过浏览器的用户界面使用粘贴操作时触发。
拖放事件
drag	在用户拖动元素或选择的文本时每几百毫秒触发一次。
dragend	在拖动操作结束（通过释放鼠标按钮或按下退出键））时触发。
dragenter	在拖动的元素或选择的文本进入有效的放置目标时触发。
dragleave	在拖动的元素或选择的文本离开有效的放置目标时触发。
dragover	在拖动的元素或选择的文本在有效的放置目标时触发（每几百毫秒）。
dragstart	在用户开始拖动元素或选择的文本时触发。
drop	在元素或选择的文本被放置在有效的放置目标时触发。
全屏事件
fullscreenchange	在 Document 进入或退出全屏模式时触发。
fullscreenerror	在尝试进入或退出全屏模式而发生错误时触发。
键盘事件
keydown	在某个键被按下时触发。
keyup	在释放按键时触发。
加载和卸载事件
DOMContentLoaded	在文档完全加载并解析后触发，无需等待样式表、图像和子框架完成加载。
readystatechange	在文档的 readyState 属性发生变化时触发。
指针事件
gotpointercapture	在使用 setPointerCapture() 捕获元素时触发。
lostpointercapture	在捕获指针释放时触发。
pointercancel	在指针事件取消时触发。
pointerdown	在指针变为活动状态时触发。
pointerenter	在指针移入到元素或其子元素之一的命中测试边界时触发。
pointerleave	在指针移出元素的命中测试边界时触发。
pointerlockchange	在指针被锁定或解锁时触发。
pointerlockerror	在指针锁定失败时触发。
pointermove	在指针坐标改变时触发。
pointerout	在指针移出元素的命中测试边界（或其它原因）时触发。
pointerover	在指针移入元素的命中测试边界时触发。
pointerup	在指针不再活动时触发。
选择事件
selectionchange	在文档中的选中的文本发生改变时触发。
触摸事件
touchcancel	在一个或多个接触点以特定于实现的方式中断（例如，创建了太多的接触点）时触发。
touchend	在从接触面移除一个或多个接触点时触发。
touchmove	在一个或多个接触点沿接触面移动时触发。
touchstart	在向接触面放置一个或多个接触点时触发。
过渡事件
transitioncancel	在 CSS 过渡取消时触发。
transitionend	在 CSS 过渡完成时触发。
transitionrun	在 CSS 过渡第一次创建时触发。
transitionstart	在 CSS 过渡实际开始时触发。

结语

Javascript中DOM常用方法和属性总结。

ZSK6

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Javascript中DOM常用方法和属性总结

文档对象模型 (DOM)将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包含着对象 (objects)。DOM 的方法 (methods) 让你可以用特定方式操作这个树，用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器，一旦某一事件被触发了，那些事件处理器就会被执行。
复制链接

扫一扫