HTML DOM

最新推荐文章于 2022-06-19 18:19:05 发布

-眼里有星河-

最新推荐文章于 2022-06-19 18:19:05 发布

阅读量120

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_62092622/article/details/122394847

版权

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

DOM节点

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点

DOM HTML tree

节点父子和同胞

在节点树中，顶端节点被称为根（root）。
每个节点都有父节点、除了根（它没有父节点）。
一个节点可拥有任意数量的子节点。
同胞是拥有相同父节点的节点。

DOM方法

一些常用的 HTML DOM 方法：

DOM属性

nodeName 属性规定节点的名称。

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

nodeValue 属性规定节点的值。

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

nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

一些常用的 HTML DOM 属性：

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点

DOM修改

改变内容

<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="Hello";
</script>
</body>

改变样式

<body>
<p id="p1">Hello world!</p>
<script>
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontSize="larger";
</script>
</body>

添加新节点

<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
document.getElementById("div1").appendChild(para);
</script>
</body>

使用事件

<body>
<script>
function ChangeBackground()
{
    document.body.style.backgroundColor="lavender";
}
</script>
<input type="button" onclick="ChangeBackground()" value="修改背景颜色" />
</body>

DOM事件

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

onclick

<body>
<p>点击按钮执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>

onload和onunload

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

<body onload="checkCookies()">
<script>
function checkCookies()
{
	if (navigator.cookieEnabled==true)
		alert("Cookie 可用")
	else
		alert("Cookie 不可用")
}
</script>
</body>

onchange

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

<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
</body>

onmouseover 和 onmouseout

<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
	obj.innerHTML="Thank You"
}
function mOut(obj)
{
	obj.innerHTML="Mouse Over Me"
}
</script>