预习博客（DOM）

散落于尘埃

于 2021-05-23 11:24:53 发布

阅读量125

点赞数 1

本文链接：https://blog.csdn.net/m0_56018900/article/details/117171847

版权

文章目录

前端

前端

(一)HTML DOM

网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM 是 HTML 的标准对象模型和编程接口
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

1.HTML DOM 树

在这里插入图片描述

2.DOM

DOM 是一项 W3C (World Wide Web Consortium) 标准
W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。

(二)HTML DOM 方法及属性

示例

<html>
<body>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

getElementById方法
访问 HTML 元素最常用的方法是使用元素的 id。
在上面的例子中，getElementById 方法使用 id=“demo” 来查找元素。
HTML DOM 方法是能够（在 HTML 元素上）执行的动作（添加或删除HTML元素）

innerHTML属性
获取元素内容最简单的方法是使用 innerHTML 属性。
innerHTML 属性可用于获取或替换 HTML 元素的内容。
innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
HTML DOM 属性是能够设置或改变的 HTML 元素的值（改变HTML元素内容）

(三)HTML DOM 元素

1.查找HTML元素

在这里插入图片描述

(1)通过 id 查找 HTML 元素

查找 id=“intro” 的元素：

var myElement = document.getElementById("intro");

如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。
如果未找到元素，myElement 将包含 null。

(2)通过标签名查找 HTML 元素

查找所有  元素：

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

查找 id=“main” 的元素，然后查找 “main” 中所有  元素：

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

(3)通过类名查找 HTML 元素

使用 getElementsByClassName()
返回包含 class=“intro” 的所有元素的列表：

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

(4)通过 CSS 选择器查找 HTML 元素

使用 querySelectorAll() 方法
返回 class=“intro” 的所有  元素列表：

var x = document.querySelectorAll("p.intro");

(5)通过 HTML 对象选择器查找 HTML 对象

查找 id=“frm1” 的 form 元素，在 forms 集合中，然后显示所有元素值：

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

2.改变 HTML 元素

在这里插入图片描述

(1)改变 HTML 输出流

JavaScript 能够创建动态 HTML 内容：

Sun May 23 2021 10:05:53 GMT+0800 (中国标准时间)

document.write() 可用于直接写入 HTML 输出流：

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

注:千万不要在文档加载后使用 document.write(),会覆盖文档

(2)改变 HTML 内容

innerHTML 属性

document.getElementById(id).innerHTML = new text

修改了 <h1> 元素的内容：

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>

</body>
</html>

(3)改变属性的值

document.getElementById(id).attribute = new value

修改了 <img> 元素的 src 属性的值：

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

(4)改变 HTML 样式

document.getElementById(id).style.property = new style

更改  元素的样式：

<html>
<body>

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

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>上面的段落已被脚本改变。</p>

</body>
</html>

3.添加和删除元素

在这里插入图片描述

(四)HTML DOM 动画

创建动画容器

<div id ="container">
    <div id ="animate">我的动画在这里。</div>
</div>

为元素添加样式
通过 style = “position: relative” 创建容器元素。
通过 style = “position: absolute” 创建动画元素。
JS创建动画
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。
基础代码：

var id = setInterval(frame, 5);

function frame() {
    if (/* 测试是否完成 */) {
        clearInterval(id);
    } else {
         /* 改变元素样式的代码 */
    }
}

示例

function myMove() {
    var elem =  document.getElementById("animate"); 
    var pos = 0;
    var id = setInterval(frame, 5);
     function frame() {
        if (pos ==  350) {
             clearInterval(id);
        } else {
             pos++; 
             elem.style.top = pos + 'px'; 
             elem.style.left = pos + 'px'; 
        }
     }
}

(五)HTML DOM事件

1.对事件做出反应

• 当用户点击鼠标时
• 当网页加载后
• 当图像加载后
• 当鼠标移至元素上时
• 当输入字段被改变时
• 当 HTML 表单被提交时
• 当用户敲击按键时

οnclick=JavaScript

2.HTML 事件属性

(1)分配事件

向 button 元素分配 onclick 事件：

<button onclick="displayDate()">试一试</button>

使用JS向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

(2)onload 和 onunload 事件

当用户进入后及离开页面时，会触发 onload 和 onunload 事件。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
onload 和 onunload 事件可用于处理 cookie。

<body onload="checkCookies()">

(3)onchange 事件

onchange 事件经常与输入字段验证结合使用。
当用户改变输入字段内容时，会调用 upperCase() 函数。

<input type="text" id="fname" onchange="upperCase()">

(4)onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：

<div onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
请把鼠标移上来</div>

<script>
function mOver(obj) {
  obj.innerHTML = "谢谢您"
}
function mOut(obj) {
  obj.innerHTML = "请把鼠标移上来"
}
</script>

(5)onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。

<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
点击鼠标</div>

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

3.事件监听器

addEventListener() 方法
•为指定元素指定事件处理程序
•为元素附加事件处理程序而不会覆盖已有的事件处理程序
•向一个元素添加多个事件处理程序
•向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件
•向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象
•更容易控制事件如何对冒泡作出反应

通过使用 removeEventListener() 方法轻松地删除事件监听器
添加事件处理程序
在这里插入图片描述

(六)HTML DOM节点

添加和删除节点（HTML 元素）

1.创建新 HTML 元素

appendChild() 方法

<div id="div1">
<p id="p1">这是一个段落。</p>      
<p id="p2">这是另一个段落。</p>    
</div>

<script>
var para = document.createElement("p");    
//创建了一个新的 <p> 元素
var node = document.createTextNode("这是新文本。");
//创建了一个文本节点
para.appendChild(node);
//向 <p> 元素追加这个文本节点

var element = document.getElementById("div1");
//这段代码查找一个已有的元素
element.appendChild(para);
//这段代码向这个已有的元素追加新元素
</script>

insertBefore() 方法

<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.删除已有 HTML 元素

node.remove()方法

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
//HTML 文档包含了一个带有两个子节点（两个 <p> 元素）的 <div> 元素

<script>
var parent = document.getElementById("div1");
//查找 id="div1" 的元素
var child = document.getElementById("p1");
//查找 id="p1" 的 <p> 元素
parent.removeChild(child);
//从父删除子
</script>

3.替换 HTML 元素

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>

(七)HTML DOM 集合

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象

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

HTMLCollection 并非数组
HTMLCollection 也许看起来像数组，但并非数组。能够遍历列表并通过数字引用元素（就像数组那样）。但无法对 HTMLCollection 使用数组方法，比如 valueOf()、pop()、push() 或 join()

HTMLCollection 长度

length 属性定义了 HTMLCollection 中元素的数量：

var myCollection = document.getElementsByTagName("p");
//创建所有 <p> 元素的集合
document.getElementById("demo").innerHTML = myCollection.length;
//显示集合的长度

改变所有  元素的背景色：

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

(八)HTML DOM 节点列表

HTML DOM NodeList 对象

NodeList 对象是从文档中提取的节点列表（集合）
•使用 getElementsByClassName() 方法，某些（老的）浏览器会返回 NodeList 对象而不是 HTMLCollection。
•所有浏览器都会为 childNodes 属性返回 NodeList 对象。
•大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象
选取文档中的所有

节点:

var myNodeList = document.querySelectorAll("p");

HTML DOM Node List 长度

length 属性定义节点列表中的节点数：

var myNodelist = document.querySelectorAll("p");
//创建所有 <p> 元素的列表
document.getElementById("demo").innerHTML = myNodelist.length;
//显示该列表的长度

改变节点列表中所有

元素的背景色：

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

HTMLCollection 与 NodeList 的区别及相同点

HTMLCollection 与 NodeList 的区别
1.HTMLCollection是 HTML 元素的集合。
NodeList 是文档节点的集合。
2.访问 HTMLCollection 项目，可以通过它们的名称、id 或索引号。
访问 NodeList 项目，只能通过它们的索引号。
3.只有 NodeList 对象能包含属性节点和文本节点。

相同点
1.HTMLCollection 和 NodeList 对象都是类数组的对象列表（集合）。
2.它们都有定义列表（集合）中项目数的 length 属性。
3.它们都可以通过索引 (0, 1, 2, 3, 4, …) 像数组那样访问每个项目。

散落于尘埃

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
预习博客（DOM）

文章目录前端(一)HTML DOM1.HTML DOM 树2.DOM(二)HTML DOM 方法及属性(三)HTML DOM 元素1.查找HTML元素(1)通过 id 查找 HTML 元素(2)通过标签名查找 HTML 元素(3)通过类名查找 HTML 元素(4)通过 CSS 选择器查找 HTML 元素(5)通过 HTML 对象选择器查找 HTML 对象2.改变 HTML 元素(1)改变 HTML 输出流(2)改变 HTML 内容(3)改变属性的值(4)改变 HTML 样式3.添加和删除元素(四)HTML
复制链接

扫一扫