dom预习博客

最新推荐文章于 2022-10-15 18:07:45 发布

玛卡巴卡x

最新推荐文章于 2022-10-15 18:07:45 发布

阅读量143

点赞数

文章标签： dom

本文链接：https://blog.csdn.net/weixin_50796134/article/details/116997222

版权

dom预习博客

(以下内容大多参考w3school,为个人学习整理)
什么是DOM?
HTML DOM 节点树
HTML DOM 访问
HTML DOM 属性
HTML DOM 修改
HTML DOM 元素
HTML DOM 事件
HTML DOM 导航

(以下内容大多参考w3school,为个人学习整理)

什么是DOM?

1.DOM(Document Object Model（文档对象模型）的缩写) 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
2.W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
其中，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
eg:
<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 “我的标题” 的父节点是 <h1> 节点
注意：元素节点包含文本节点。
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

HTML DOM 访问

访问 HTML 元素等同于访问节点，我们可以以不同的方式来访问 HTML 元素

getElementById() 方法:
返回带有指定 ID 的元素
使用方法：node.getElementById(“id”);
eg:x=document.getElementById(“intro”);
document.write(x.innerHTML);
getElementsByTagName() 方法:
返回带有指定标签名的所有元素
使用方法：node.getElementsByTagName(“tagname”);
eg：x=document.getElementsByTagName(“p”);
document.write("第一段的文本: " + x[0].innerHTML);
//x[0]指的是第一个<p>
getElementsByClassName() 方法：
查找带有相同类名的所有 HTML 元素
eg:document.getElementsByClassName(“intro”);
则会返回包含 class=“intro” 的所有元素的一个列表

HTML DOM 属性

一. 属性是节点（HTML 元素）的值，您能够获取或设置。
二. 获取元素内容
1.innerHTML 属性：获取或替换 HTML 元素的内容
使用方法：

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
//获取 id="intro" 的 <p> 元素的 innerHTML
</script>

2.nodeName 属性：nodeName 属性规定节点的名称。

 nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document

3.nodeValue 属性：nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值

4.nodeType 属性：返回节点的类型
在这里插入图片描述

HTML DOM 修改

修改 HTML = 改变元素、属性、样式和事件。
1.改变元素内容：利用innerHTML 属性。
2.改变 HTML 样式：
eg:
document.getElementById(“p2”).style.color=“blue”;
document.getElementById(“p2”).style.fontFamily=“Arial”;
3.向 HTML DOM 添加新元素

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
//appendChild指的是...的子节点
var element=document.getElementById("d1");
element.appendChild(para);
</script>

4HTML DOM 允许您在事件发生时执行代码
当 HTML 元素”有事情发生“时，浏览器就会生成事件：

在元素上点击
加载页面
改变输入字段
eg:

<html>
<body>

<input type="button" onclick="document.body.style.backgroundColor='lavender';"
value="Change background color" />

</body>
</html>
//在点击按钮时背景变为lavender色

HTML DOM 元素

添加、删除和替换 HTML 元素。
1.创建新的 HTML 元素

appendChild()
(将新元素作为父元素的最后一个子元素进行添加)
如需向 HTML DOM 添加新元素，您首先必须创建该元素，然后把它追加到已有的元素上。

<script>
var para=document.createElement("p");
//创建一个<p>标签
var node=document.createTextNode("This is new.");
//创建一个文本节点
para.appendChild(node);
//父节点和子节点建立联系
var element=document.getElementById("div1");
//找到想插入的父元素
element.appendChild(para);
//插入<p>This is new.</p>
</script>

insertBefore()
(将新元素作为父元素的第一个子元素进行添加)

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
var child=document.getElementById("p1");
element.insertBefore(para,child);
</script>
//需要将变动的父节点和子节点都赋予变量

2.删除已有的 HTML 元素
removeChild（）方法
用法：parent.removeChild(child);

 <script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
//不能在不引用父元素的情况下删除某个元素
</script>

3.替换 HTML 元素
replaceChild() 方法

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

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

HTML DOM 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

 HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

1.对事件作出反应
eg:点击时，改变元素的内容

1.常规：<h1 onclick="this.innerHTML='hello!'">
请点击这段文本！</h1>
2.调用函数：<script>
function changetext(id)
{
id.innerHTML="hello!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">请点击这段文本!</h1>
</body>

2.向 HTML 元素分配事件

<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
//在点击上面写着试一试的按钮时，在下方会出现中国标准时间那一串串

3.onload 和 onunload 事件
当用户进入或离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

<body onload="checkCookies()">

<script>
function checkCookies()
{
if (navigator.cookieEnabled==true)
	{
	alert("Cookies are enabled")
	}
else
	{
	alert("Cookies are not enabled")
	}
}
</script>
//弹出的提示框会告诉你浏览器是否已启用 cookie。

4.onchange 事件
onchange 事件常用于输入字段的验证。

<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>

<input type="text" id="fname" onchange="myFunction()">
//当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。

5.onmouseover 和 onmouseout 事件以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

<div 
onmousedown="mDown(this)" 
onmouseup="mUp(this)" 
style="background-color:#D94A38;width:200px;height:50px;padding-top:25px;text-align:center;">
点击这里
</div>

<script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="松开鼠标"
}

function mUp(obj)
{
obj.style.backgroundColor="#D94A38";
obj.innerHTML="谢谢你"
}
</script>

HTML DOM 导航

通过 HTML DOM，您能够使用节点关系在节点树中导航。

HTML DOM 节点列表
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。可以通过下标号访问这些节点。如需访问第二个
，可以写y=x[1];//下标号从 0 开始。
HTML DOM 节点列表长度
length 属性定义节点列表中节点的数量。
可以使用 length 属性来循环节点列表

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

3.导航节点关系

三个节点属性：parentNode、firstChild 以及 lastChild

<html>
<body>
<p>Hello World!</p>
<div>
  <p>第一段</p>
  <p>第二段</p>
</div>
</body>
</html>

<p> 元素是 <body> 元素的首个子元素（firstChild）
<div> 元素是 <body> 元素的最后一个子元素（lastChild）
<body> 元素是首个 <p> 元素和 <div> 元素的父节点（parentNode）

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

有两个特殊的属性，可以访问全部文档：
document.documentElement - 全部文档
document.body - 文档的主体

<script>
alert(document.body.innerHTML);
</script>
//会在弹出的提示框下显示body中的全部内容

childNodes 和 nodeValue属性:获取元素的内容

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
//获取 id="intro" 的 <p> 元素的值