JavaScript HTML DOM

JavaScript HTML DOM

---

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素

HTML DOM (文档对象模型)

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

HTML DOM 模型被构造为对象的树：

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

• JavaScript 能够改变页面中的所有 HTML 元素

• JavaScript 能够改变页面中的所有 HTML 属性

• JavaScript 能够改变页面中的所有 CSS 样式

• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素

• 通过标签名找到 HTML 元素

• 通过类名找到 HTML 元素

• 通过css选择器获取HTML元素

document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
document.getElementsByClassName();
document.querySelector();
document.querySelectorAll();

改变 HTML 内容

参考：Element

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

document.getElementById(id).innerHTML='新的 HTML'
document.getElementById(id).innerText='新的 Text'

innerHTML和innerText的区别

1. innerHTML会解析字符中的标签

2. innerText不会解析标签，直接以文本的方式替换到页面

改变 HTML 属性

//获取该标签所拥有的所有属性
document.getElementById(id).attributes
​
// 为标签设置属性
document.getElementById(id).setAttribute('属性名','属性值')
​
//获取标签的属性
document.getElementById(id).getAttribute('属性名')

改变 HTML 样式

document.getElementById(id).style.property=新样式
​
//设置字体颜色
document.getElementById(id).style.color = 'red'
//设置字体大小
document.getElementById(id).style.fontSize = '20px'
//设置背景颜色
document.getElementById(id).style.backgroundColor='red'
//显示标签
document.getElementById(id).style.display='block'
//隐藏标签
document.getElementById(id).style.display='none'

表单元素

 

使用事件

HTML DOM 允许我们通过触发事件来执行代码。

事件代表网页和用户的交互的所触发的动作。

比如以下事件：

• 元素被点击。

• 页面加载完成。

• 输入框value值被修改。

• ……

何时使用事件

• 当用户点击鼠标时

• 当网页已加载时

• 当图像已加载时

• 当鼠标移动到元素上时

• 当输入字段被改变时

• 当提交 HTML 表单时

• 当用户触发按键时

事件参考

MDN上提供的事件列表：https://developer.mozilla.org/zh-CN/docs/Web/Events

事件对象可以通过addEventListener()或者事件对象的on事件名的属性来绑定事件

let element = document.getElementById(id)
//通过addEventListener为指定元素绑定单击事件
element.addEventListener('click',function(event){
   
})
​
//通过onclick属性为指定元素绑定事件
element.onclick = function(event){
    
}

常见的事件

 

事件名	描述
keydown	按下按键触发的事件
keyup	按住并松开按键时触发的事件
keypress	按下以及松开后触发的事件
blur	失去焦点时触发的事件
focus	获取焦点时触发的事件
click	鼠标单击事件
dblclick	鼠标双击左键事件
mousedown	按住鼠标触发的事件
mouseenter	鼠标移入触发的事件
mouseover	鼠标移入时触发的事件
mouseout	鼠标移开时触发的事件
change	当文本框，下拉菜单，单选框，复选框等表单元素的value发生变化时触发的事件
input	当文本框发生用户输入时触发的事件
reset	点击表单中的重置按钮触发的事件
submit	提交表单时，触发的事件
load	页面加载完，图片加载完触发的事件

 

创建新的 HTML 元素 (节点) - appendChild()

//在内存中创建 <p> 元素，还不会渲染到页面:
var para = document.createElement("p");
//为 <p> 元素创建一个新的文本节点：
var node = document.createTextNode("这是一个新的段落。");
//将文本节点添加到 <p> 元素中：
para.appendChild(node);
/*
最后，在一个已存在的元素中添加 p 元素。
*/
var element = document.getElementById("div1");
//将p元素添加到已存在的元素中
element.appendChild(para);

移除已存在的元素

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