dom文档对象手册_JS中DOM介绍

weixin_39859954

于 2020-12-24 00:11:54 发布

阅读量236

点赞数 1

文章标签： dom文档对象手册

本文链接：https://blog.csdn.net/weixin_39859954/article/details/112076758

版权

DOM（document，即文档对象模型），里面包含了各种的API借口来供我们使用，主要分成了以下几类：

DOM 接口
HTML 接口
HTMLDocument 接口描述了包含 HTML 的文档，一个 HTMLDocument 对象还可以访问浏览器的各种功能。注意：HTML 规范也继承了Document 接口。
SVG 接口

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

常用接口介绍：

1、Node类型

在JS中，我们可以利用node.nodeType来判断一个元素的类型是什么，经常会在判断一个元素的父亲节点或者是儿子节点是否是我们想要找的那个。以下面的代码为例：

<!DOCTYPE html>
<html>
<body>

<p>饮料：</p>
<ul>
  <li>咖啡</li>
  <li>可乐</li>
</ul>

<p id="demo">点击按钮来获得列表中首个列表项的父节点节点名。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
  var x=document.getElementById("demo");  
  var y=document.getElementsByTagName("LI")[0];
  console.log(y.parentNode.nodeName);    //结果： UL
  console.log(y.parentNode.nodeType);   //结果： 1
}
</script>

</body>
</html>

例子中JS使用node.nodeType方法可能引起

常用的node类型的API

2、如何使用API

createElement：通过传入指定的一个标签名来创建一个元素。使用方法如下：

var parent = document.createElement('div')
var child = document.createElement('a')
parent.appendChild(child);

⚠️注意：

这个API接口可以创建一个相应的元素，但是这个元素或者标签并没有加入html中去，我们需要使用appendChild()方法将其加入html文档中去。

查询元素的API接口：

document.getElementById
通过ID来访问相对应的元素，返回值是Element
document.getElementByClassName
通过class name来获取响应的元素
document.getElementByTagName
document.querySelector('选择器') document.querySelectorAll('选择器')

其他常用的的API接口可以参考：DOM文档

weixin_39859954

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
dom文档对象手册_JS中DOM介绍

DOM（document，即文档对象模型），里面包含了各种的API借口来供我们使用，主要分成了以下几类：DOM 接口HTML 接口HTMLDocument 接口描述了包含 HTML 的文档，一个 HTMLDocument 对象还可以访问浏览器的各种功能。注意：HTML 规范也继承了Document 接口。SVG 接口文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化...
复制链接

扫一扫