DOM

最新推荐文章于 2022-06-14 17:09:32 发布

小欣的blogs

最新推荐文章于 2022-06-14 17:09:32 发布

阅读量307

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cedricdx/article/details/89319423

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

DOM

DOM基本定义

DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。DOM 描
绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类
型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。以下面的 HTML 为例：

<html> 
 <head> 
 <title>Sample Page</title> 
 </head> 
 <body> 
 <p>Hello World!</p> 
 </body> 
</html>

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个子节点，即元素，我们称之为文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文
档只能有一个文档元素。在 HTML 页面中，文档元素始终都是元素。在 XML 中，没有预定义
的元素，因此任何元素都可能成为文档元素。
每一段标记都可以通过树中的一个节点来表示：HTML 元素通过元素节点表示，特性（attribute）
通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有 12 种节点类型，这些类型都继承自一个基类型。
在这里插入图片描述

Document对象

属性：对象类型：body、title、URL

body

 console.log(document.body);  //body对象
 document.body.style.backgroundColor='gray';

title

console.log(document.title);
 document.title='AAA';

console.log(document.URL);     //获得当前路径

集合类型

Document集合类型：images、forms、links

images

console.log(document.images);
document.images[0].src='images/1.jpg'  //改图片
document.images[1].style.border='1px solid gray';
console.log(document.images.length);

forms

<forms action=""><input type="text"></forms>    //这个要在div里面写
             // console.log(document.forms);

links 超链接

console.log(document.links);
<a href="#">百度</a>     //这个要在div里写
document.links[0].innerHTML='淘宝' //把百度改成淘宝
document.links.style.textDecoraction='none';

节点对象

常用的属性和方法：

创建新的 HTML 元素 (节点) - appendChild()
替换 HTML 元素 - replaceChild()
返回元素的父节点-childNodes()，以 NodeList(类数组) 对象;包括元素节点和文本节点。
children: 孩子节点（只有元素节点）
(可以使用 length 属性来确定子节点的数量，然后就能够遍历所有的子节点并提取您需要的信息。)
返回位于相同节点树层级的前一个元素-previousSibling();
返回位于相同节点树层级的下一个节点-extSibling();
向元素添加新的子节点9，作为最后一个子节点-ppendChild();
复制元素-cloneNode();
设置或返回元素的内容-innerHTML=’ ';
返回元素的最后一个子元素-lastChild();

索引

每个元素都有索引，索引是从0开始的，根据索引号可以找到对应的元素。
语法：名称[索引]；

<body>
<div id="box">
      <div>111</div>
      <div>222</div>
      <div>333</div>
    </div>
<script type="text/javascript">
	   var o=document.getElementById('box');
	   var o1=o.childNodes;
	   var o2=o.firstChild;
	   o2.nextSibling.innerHTML='哈哈哈';
	   console.log(o1);   //NodeList(7)    输出div里面元素的属性
	   console.log(o1[1]);//<div>111>/div>  找到该元素
	   console.log(o1.length);// 有7个孩子个数
	</script>
	</body>

删除节点

removeChild:删除节点
cloneNode(参数):复制节点
返回值：复制子节点
参数true:复制子节点
参数false:不复制子节点

创建添加节点

createElement 创建元素节点
createTextNode 创建文本节点
write 写入文本
insertBefore 在指定节点前插入
appendChild 追加孩子节点

小欣的blogs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

DOMDOM基本定义节点层次DOM基本定义DOM（文档对象模型）是针对 HTML 和 XML 文档的一个 API（应用程序编程接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。节点层次DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的...
复制链接

扫一扫

专栏目录