四、DOM 操作

落败.

已于 2024-01-25 23:22:19 修改

阅读量111

点赞数

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

于 2023-05-10 19:21:28 首次发布

本文链接：https://blog.csdn.net/m0_72166275/article/details/130607984

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

DOM 操作

4.1 DOM 操作分类

1.DOM core (DOM 操作核心)

DOM core 定义了一套标准的针对任何结构化文档的对象，包括 HTML、XHTML 和 XML。XML DOM定义了一套标准 XML 文档的对象。HTML DOM 定义了一套标准的针对 HTML 文档的对象。

2.HTML-DOM

使用 JavaScript 和 DOM 为 HTML 文档编写脚本时，有许多专属的 HTML-DOM 属性。
HTML-DOM 出现的比 DOM Core 更早，提供了一些更简单的标记描述各种 HTML 元素的属性。

3.CSS-DOM

CSS-DOM 是针对 CSS 的操作。
在 JavaScript 中，CSS-DOM 技术的主要作用是获取和设置 style 对象的各种属性，即 CSS 属性。
通过改变 style 对象的各种属性，可以使网页呈现出各种不同的效果。

4.1.2 节点和节点之间的关系

节点可以理解为 HTML 文档中每个标签或者元素。
DOM 中节点的规定:
- 整个文档是一个文档节点。
- 每个 HTML 标签是一个元素节点。
- 包含在 HTML 元素中的文本是文本节点。
- 每个 HTML 属性是一个属性节点。
- 注释属于注释节点。
文档节点 DOM 树

在这里插入图片描述

使用父节点 (parent) 、子节点 (child)、兄弟节点 (sibling) 等术语来描述节点的层次关系，父节点拥有子节点，同级的子节点被称为同胞或兄弟节点。
关系:
- 在 DOM 树中，顶部节点被称为根(root)、节点。
- 每个节点都有节点，除了根（它没有父节点），如和的父节点都是节点，文本节点“DOM 应用”的父节点是节点。
- 一个节点可以拥有任意数量的子节点，如节点的子节点有
  、
  和
  - 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本布局结构</title>
</head>
<body>
<!--头部-->
<header></header>
<!--导航-->
<nav></nav>
<!--section 区域-->
<section>
  <header></header>
  <article></article>
  <figure></figure>
  <footer></footer>
</section>
<!-- aside 区域-->
<aside>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</aside>
<!-- footer 区域 -->
<footer></footer>
</body>
</html>

4.1.4 节点信息

每个节点都有包含节点某些信息的属性。
- nodeName(节点名称)。
  - nodeName 属性含有某些节点的名称。
  - 元素节点的 nodeName 是标签名称。
  - 属性节点的 nodeName 是属性名称。
  - 文本节点的 nodeName 永远是 #text。
  - 文档节点的 nodeName 永远是 #document。
- nodeValue(节点值)。
  - 对于文本节点，nodeValue 属性包含文本。
  - 对于属性节点，nodeValue 属性包含属性值。
  - nodeValue 属性对于文档节点和元素节点是不可用的。
- nodeType(节点类型)。
  - nodeType 属性可返回节点的类型。

节点类型

元素类型	节点类型
元素 element	1
属性 attr	2
文本 text	3
注释 comments	8
文档 document	9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li id="sina">新浪微博</li>
    <li>官方微信</li>
    <li>联系我们</li>
    <li>公益基金会</li>
</ul>
<script type="text/javascript">
<!--    元素节点-->
var liNode=document.getElementById("sina");
var type=liNode.nodeType;
var name=liNode.nodeName;
var value=liNode.nodeValue;
console.log(type,name,value);//1 "LI"  null

//文本节点
var textNode=liNode.firstChild;
var type=textNode.nodeType;
var name=textNode.nodeName;
var value=textNode.nodeValue;
console.log(type,name,value);//3 "#text"  新浪微博
</script>
</body>
</html>

在这里插入图片描述

firstChild 属性会返回节点的第一个子节点。
控制台第一次输出的是元素节点的节点信息，第二次输出的是文本节点的节点信息。

4.1.5 访问节点

访问 HTML 文档的节点主要有两种方式：
- 一种是通过 getElement 系列方法访问指定节点。
- 一种是通过节点的层次关系访问节点。

1.通过 getElement 系列方法访问指定节点

在 HTML 文档中，getElementsById() 方法、getElementsByName() 方法、getElementsByTagName() 方法
- getElementById()方法：返回按属性查找的第一个对象的引用。
- getElementsByName() 方法：返回指定名称 name 查找对象的集合。
- getElementsByTagName() 方法：返回指定标签名 TagName 查找的对象集合。

2.通过节点的层次关系访问节点

通过 getElementById()、getElementsByName() 和 getElementsTagName() 这三种方法可查看 HTML 文档中能够的任何元素
但是这三种方法都会忽略文档的结构。
在 HTML DOM 中提供了一些节点属性，这些属性可遵循文档的结构，在文档的局部进行短距离元素查找。

节点属性

属性类型	描述
parentNode	返回当前节点的父节点
childNodes	返回子节点集合
firstChild	返回节点的第一个子节点，通常用于访问文本节点
lastChild	返回节点的最后一个子节点
nextSibling	返回下一个节点
previousSibling	返回上一个节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="desc">
    <h2>关注我们</h2>
    <ul>
        <li>新浪微博</li>
        <li>官方微信</li>
        <li>联系我们</li>
        <li>公益基金会</li>
        <li>服务网点</li>
    </ul>
</div>

</body>
</html>

节点之间的关系如下
- ·
  的子节点 (childNodes) 是
  、
  - 。
- ·
  、
  - 的父节点 (parentNode) 是
    ,
    是
    的第一个子节点(firstChild)，
    是
    的最后一个子节点(lastChild)。
- 在
  - 中，
    - 是
    - 的父节点，
    - 是
      - 的子节点。
    - 官方微信
    - 的上一个节点(previousSibling) 是
    - 新浪微博
    - 。
- 官方微信
- 的下一个子节点(nextSibling)是
- 联系我们
- 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="desc">
    <h2>关注我们</h2>
    <ul>
        <li>新浪微博</li>
        <li>官方微信</li>
        <li>联系我们</li>
        <li>公益基金会</li>
        <li>服务网点</li>
    </ul>
</div>
<script type="text/javascript">
    var oDesc=document.getElementById("desc");
    var threeLi=oDesc.lastChild.firstChild.nextSibling.nextSibling.innerHTML;
    console.log(threeLi);
</script>
</body>
</html>

这样子会发现 id 为 “desc” 的 div 最后一个节点并不是我们想象的
- ,输出结果为 #text，然后继续输出此节点的第一个节点为"null"。
因为 id 为 “desc” 他的最后一个节点有空格的存在。所以选不到想要选择的节点。

element 常用属性

属性类型	描述
firstElementChild	返回节点的第一个子节点，通常用于访问文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	返回指定节点的下一个兄弟节点
previousElementSibling	返回指定节点的上一个兄弟节点

区别：
- firstChild、lastChild、nextSibling、perviousSibling 返回节点包括文本节点和注释节点。
- firstElementChild、lastElementChild、nextElementSibling、previousElementSibling 返回节点不包括文本节点和注释节点。
需要获取不同的节点时使用节点属性和 element 属性的写法

oFirst=oParent.firstElementChild || oParent.firstChild   //获取第一个子节点
oLast=oParent.lastElementChild || oParent.lastChild      //获取最后一个子节点
oNext=oParent.nextElementSibling || oParent.nextsibling  //获取下一个子节点
oPre=oParent.previousElementSibling || oParent.previousSilbing //获取上一个节点

4.2 设置元素样式

4.2.1 style 属性设置样式

在 HTML DOM 中，style 是一个对象，代表一个单独的样式声明，可通过应用样式的文档或元素访问 style 对象。
语法：

HTML 元素.style.样式属性="值";

有一个 id 为 main 的 div ，要改变 div 中的字体颜色为红色，字体大小为 13px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main">好帅</div>

<script type="text/javascript">
        document.getElementById("main").style.color="#ff0000";
        document.getElementById("main").style.fontSize="25px";
</script>
</body>
</html>

在 JavaScript 中使用 CSS 样式与在 HTML 中使用 CSS 稍有不同。在JavaScript 中，“-” 代表减号，如果样式属性名称中带有"-"号，则要省去。

4.2.2 样式属性

类别	属性	描述
text(文本)	fontSize	设置元素的字体大小
	fontWeight	设置字体的粗细
	textAlign	排列文本
	color	设置文本的颜色
	texrDecoration	设置文本的修饰

类别	属性	描述
background(背景)	backgroundColor	设置元素的背景颜色
	backgroundImage	设置元素的背景图像
	backgroundRepeat	设置是否及如何重复背景图像

类别	属性	描述
padding (边距)	padding	设置元素的填充
	paddingTop paddingBotton paddingLeft paddingRight	设置元素的上、下、左、右填充

类别	属性	描述
border (边框)	border	设置四个边框的属性
	borderTop boederBottom borderLeft borderRight	设置上、下、左、右边框的属性

4.2.3 在 JavaScript 中常用的事件

名称	描述
onclick	鼠标单击某个对象
onmouseover	鼠标悬浮
onmouseout	鼠标移出
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开

4.2.4 ClassName 属性设置样式

在 HTML DOM 中，className 属性可设置或返回元素的 class 样式。
语法

HTML 元素.className="样式名称"

可以在 CSS 样式中设置好样式
在某些时间加载的时候将它的 class 设置成指定的名字。

4.3 获取元素的样式

在 JavaScript 中可以使用 style 属性获取样式的属性值。
语法

HTML 元素.style.样式属性

4.3.1 getComputedStyle()

DOM 提供了一个 getComputedStyle() 方法，这个方法接收两个参数，需要获取样式的属性值。
语法

document.defaultView.getComputedStyle(元素,null).属性;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="cartList"></div>
</body>
<script type="text/javascript">
    var cartList=document.getElementById("cartList");
    alert(document.defaultView.getComputedStyle(cartList,null).display);
</script>
</html>

在这里插入图片描述

4.3.2 currentStyle 对象

微软公司为每个元素提供了一个 durrentStyle 对象，包含了所有元素的 style 对象的特征和任何未被覆盖的 CSS 规则的 style 特性。
currentStyle 对象与 style 对象的使用方式一样。
语法

HTML 元素.currentStyle.样式属性;

currentStyle 对象的特性是只读的。
如果要给样式赋值，必须使用 style 对象。
注意
- 虽然 getComputedStyle() 方法是 DOM 提供的，但 IE 浏览器不支持，而 Firefox、Opera、Safari、Chrome 浏览器是支持的。
- 在 IE6~IE8 浏览器下需要使用 currentStyle 对象获取样式的属性值。
可以通过封装一个方法，实现兼容所有浏览器。

//获取元素样式的兼容性写法
function getStyle(obj,attr){
    return obj.currentStyle? obj.currentStyle[attr]
    :document.defaultView.getComputedStyle(obj)[attr];
}

le 对象的特性是只读的。

如果要给样式赋值，必须使用 style 对象。
注意
- 虽然 getComputedStyle() 方法是 DOM 提供的，但 IE 浏览器不支持，而 Firefox、Opera、Safari、Chrome 浏览器是支持的。
- 在 IE6~IE8 浏览器下需要使用 currentStyle 对象获取样式的属性值。
可以通过封装一个方法，实现兼容所有浏览器。

//获取元素样式的兼容性写法
function getStyle(obj,attr){
    return obj.currentStyle? obj.currentStyle[attr]
    :document.defaultView.getComputedStyle(obj)[attr];
}