DOM

最新推荐文章于 2021-06-10 15:03:32 发布

龙泉山

最新推荐文章于 2021-06-10 15:03:32 发布

阅读量93

点赞数

分类专栏：前端

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

DOM 以树结构表达 HTML 文档。

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

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

具体到,还有父节点,子节点,同胞节点,第一个子节点,最后一个子节点等.

方法

HTML DOM 方法是我们可以在节点（HTML 元素）上执行的动作。

方法	描述
getElementById()	返回带有指定 ID 的元素。
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表。
appendChild()	把新的子节点添加到指定节点。
removeChild()	删除子节点。
replaceChild()	替换子节点。
insertBefore()	在指定的子节点前面插入新的子节点。
createAttribute()	创建属性节点。
createElement()	创建元素节点。
createTextNode()	创建文本节点。
getAttribute()	返回指定的属性值。
setAttribute()	把指定属性设置或修改为指定的值。

属性

HTML DOM 属性是我们可以在节点（HTML 元素）设置和修改的值。

innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点document.getElementById("intro").firstChild.nodeValue
attributes - 节点（元素）的属性节点

innerHTML

获取元素内容的最简单方法是使用 innerHTML 属性。

document.getElementById("intro").innerHTML;

nodeValue

属性规定节点的值。

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

document.getElementById("intro").firstChild.nodeValue

示例

<!DOCTYPE html>

<html>

</head>

<body>

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

</body> </html>

DOM 访问

通过使用 getElementById() 方法方法返回带有指定 ID 的元素引用：
通过使用 getElementsByTagName() 方法返回带有指定标签名的所有元素。
通过使用 getElementsByClassName() 方法查找带有相同类名的所有 HTML 元素 注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。

DOM - 修改

改变 HTML 内容 document.getElementById("p1").innerHTML="新文本!";
改变 CSS 样式 document.getElementById("p2").style.color="blue";
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）

修改HTML内容,

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>
<p id="p1">Hello world!</p>
<script>
function ChangeText()
{
    document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script>
<input type="button" onclick="ChangeText()" value="修改文本" />
</body>

改变样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>

创建新的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<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);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>

删除已有的HTML元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>

事件

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

点击鼠标

<button onclick="displayDate()">点我</button>
<script>
function displayDate()
{
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

网页加载时 onload 和 onunload 事件

<body onload="checkCookies()">
<script>
function checkCookies()
{
	if (navigator.cookieEnabled==true)
	{
		alert("Cookie 可用")
	}
	else
	{
		alert("Cookie 不可用")
	}
}
</script>
<p>页面载入时，弹出浏览器 Cookie 可用状态。</p>
</body>

onchange事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
</body>
</html>

0
点赞
踩
0

收藏

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

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。DOM 以树结构表达 HTML 文档。在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。节点根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点...
复制链接

扫一扫