【JS】19--HTML DOM

作者: Daeeman | 来源:发表于2020-04-02 17:12 被阅读0次

【JS】19--HTML DOM
Day7：virtual dom & MVVM
virtual dom
React 入门（阮一峰教程笔记）
DOM
面试中React与Vue的比对 / 面试/mvvm/virtua
JS第七天-03
异步编程
虚拟DOM的实现
element upload http-request 设置上传

1. 什么是 DOM？

DOM 是一项 W3C (World Wide Web Consortium) 标准。

DOM 定义了访问文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

2. HTML DOM（文档对象模型）

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

HTML DOM 模型被结构化为对象树：

对象的 HTML DOM 树

DOM HTML 树

1. 什么是 HTML DOM？

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

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

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。
document.write 写入文档

2. dom选择器 (查找 HTML 元素)

方法	描述
document.getElementById(id)	通过元素 id 来查找元素(单个)
document.getElementsByTagName(name)	通过标签名来查找元素(类数组-多个)
getElementsByName(name)	通过名称获取元素（类数组-多个）
document.getElementsByClassName(name)	通过类名来查找元素（类数组-多个）
querySelector(css)	通过css获取元素（单一）
querySelectorAll(css)	通过css获取元素（多个）

3. 改变 HTML 元素

方法	描述
innerText	改变文本（不能嵌套标签）
element.innerHTML = new html content	改变元素的 inner HTML(可嵌套标签)
element.attribute = new value	改变 HTML 元素的属性值
element.setAttribute(attribute, value)	改变 HTML 元素的属性值
element.style.property = new style	改变 HTML 元素的样式

4. 添加和删除元素

方法	描述
document.createElement(element)	创建 HTML 元素
document.removeChild(element)	删除 HTML 元素
document.appendChild(element)	添加 HTML 元素
document.replaceChild(element)	替换 HTML 元素
document.write(text)	写入 HTML 输出流

5. 添加事件处理程序

方法	描述
document.getElementById(id).onclick = function(){code}	向 onclick 事件添加事	件处理程序

6. document.write()

改变 HTML 输出流
JavaScript 能够创建动态 HTML 内容：
在 JavaScript 中，document.write() 可用于直接写入 HTML 输出流：

实例

document.write(Date());

输出：

Thu Apr 02 2020 17:52:39 GMT+0800 (中国标准时间)

7. innerHTML

改变 HTML 内容
修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。

实例 : 修改 <p> 元素的内容

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

<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>

8. 改变属性的值

属性操作

获取属性 ---------- getAttribute(属性名)
设置属性 ---------setAttribute(属性名,属性值)

如需修改 HTML 属性的值，请使用如下语法：

实例 : JavaScript 把此元素的 src 属性从 "smiley.gif" 更改为 "landscape.jpg"

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

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

3. DOM CSS

1. 改变 HTML 样式

如需更改 HTML 元素的样式，请使用此语法：

document.getElementById(id).style.property = new style
下面的例子更改了 <p> 元素的样式：

实例 :段落被脚本改变

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

document.getElementById("p2").style.color = "blue";

4. 动画

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">单击我</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
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"; 
    }
  }
}
</script>
</body>
</html>

5. DOM 事件

1. 事件类型

a . 窗口事件

事件	解释
scroll	滚动
load	加载完毕
resize	窗口大小发生改变
onload	当用户进入页面时，会触发 onload
onunload	当用户离开页面时，onunload 事件。

onload 和 onunload 事件可用于处理 cookie。

b .鼠标事件

事件	解释
onclick	单击
dblclick	双击
onmouseover	移入
onmouseout	移除
onmousemove	移动
oncontextmenu	右键
mousewheel	鼠标滚动

c .鼠标之拖动事件

事件	解释
dragstart	开始拖动
dragover	拖动到上方
drop 松开

d .表单事件

事件	解释
onblur	失去焦点
onfocus	获取焦点
onsubmit	提交
onchange	发生改变

change事件

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

请输入您的名字：<input type="text" id="fname" onchange="myFunction()">

<p>离开输入字段时，会触发一个函数，将输入文本转换为大写。</p>

</body>
</html>

e. 键盘事件

事件	解释
keyup	键盘弹起
keydown	键盘按下
keypress	键盘按下*

f .手指事件

事件	解释
touchstart	开始触摸
touchmove	触摸移动
touchend	结束触摸

2. 事件监听器

a. 事件流类型

冒泡流
    最小最具体的元素得到事件，再逐级向上传递
捕获流
    和冒泡相反

事件冒泡还是事件捕获？
在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>，然后用户点击了这个 <p> 元素，应该首先处理哪个元素“click”事件？

在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：

addEventListener(event, function, useCapture);
默认值是 false，将使用冒泡传播，如果该值设置为 true，则事件使用捕获传播。

实例

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

b. addEventListener() 方法

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript addEventListener()</h2>
<p>此示例使用 addEventListener() 方法将 click 事件附加到按钮。</p>

<button id="myBtn">试一试</button>
<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（比如 "click" 或 "mousedown"）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

c. 向元素添加事件处理程序

实例
当用户点击某个元素时提示 "Hello World!"：

element.addEventListener("click", function(){ alert("Hello World!"); });

您也可以引用外部“命名”函数：实例
当用户点击某个元素时提示 "Hello World!"：

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

d. 向相同元素添加多个事件处理程序

addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

e. removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

实例

element.removeEventListener("mousemove", myFunction);

网友评论

本文标题：【JS】19--HTML DOM

本文链接：https://www.haomeiwen.com/subject/mlaxphtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！