javascript入门（二）- DOM-CSDN博客

本文链接：https://blog.csdn.net/u014761412/article/details/112374399

文章目录

一、什么是DOM
二、通过DOM操控HTML
三、操控CSS元素
四、DOM事件

一、什么是DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简称为DOM

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二、通过DOM操控HTML

2.1 改变 HTML 输出流

document.write() 可用于直接向 HTML 输出流写内容

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

2.2 查找 HTML 元素

通过 id 找到 HTML 元素

var x=document.getElementById("intro"); /*查找id=“intro”的标签*/

通过标签名找到 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

2.3 改变HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性

基本语法

document.getElementById(id).innerHTML=新的 HTML

改变p标签中的内容

<html>
<body>

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

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

2.4 改变 HTML 属性

修改属性要使用attribute方法

基本语法

document.getElementById(id).attribute=新属性值

修改img中的src属性

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

2.5 创建新的 HTML 元素 (节点)

创建新元素要使用appendChild()函数，这个方法可以将新元素添加至末尾

要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它

先创建一个p元素，然后添加到div1中

<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>

创建新元素还可以使用insertBefore()函数，这个方法会将元素添加到开始位置

下面这个例子会将元素插到p1之前

<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");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

2.6 移除已存在的元素

要移除一个元素，你需要知道该元素的父元素

<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>

2.7 替换元素

替换元素使用replaceChild()这个函数

<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 parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

2.8 元素导航

HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。

var x=document.getElementsByTagName("p");

y=x[1]; //访问第二个p元素

节点列表长度

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

节点关系

parentNode、firstChild 以及 lastChild ，可以在不同层级之间进行导航

<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p>Hello World!</p>
<div>
  <p>DOM 是非常有用的!</p>
  <p>这个实例演示了节点的关系。</p>
</div>
 
</body>
</html>

以上面这个html作为例子

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

2.9 HTML DOM 集合(Collection)

三、操控CSS元素

基本语法

document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</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>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

四、DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应

下面例子，当用户在

元素上点击时，会改变其内容

点击文本的时候会调用一个函数

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id) // id表示一个形参
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1> <!-- 当点击文本的时候，将此元素对象传入changetext函数中 -->
</body>
</html>