JavaScript DOM 文档对象模型（获取、改变html元素）

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

DOM 模型被结构化为对象树，又称 DOM 树 。

是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的

                                                                                                                                                                                                                                                                                                                

JavaScript 获取 HTML 元素：

方法                                                                                 描述

document.getElementById(‘id’)                                   通过元素 id 来查找元素

document.getElementsByTagName(‘name’)             通过标签名来查找元素

document.getElementsByClassName(‘class’)          通过类名来查找元素

document.getElementsByName(‘name’)                   通过表单元素中 name 名查找元素

document.querySelector(‘CSS 选择器’)                    通过 CSS 选择器获取匹配上的第一个元素

document.querySelectorAll(‘CSS 选择器’)                通过 CSS 选择器获取匹配上的所有元素

 使用方法：

<p class="isCalss" id="isId">第一个段落</p>
<p class="isCalss">第二个段落</p>
<input class="isCalss" name="isName" type="text">
<input class="isCalss" name="isName" type="text">
<script>
// 获取到第一个 P 标签
document.getElementById('isId');
// 获取到两个 p 标签
document.getElementsByTagName('p');
// 获取到两个 p 标签和两个 input 标签
document.getElementsByClassName('isCalss');
// 获取到两个 input 标签
document.getElementsByName('isName');
// 获取到第一个 p 标签
document.querySelector('.isCalss');
// 获取到两个 p 标签和两个 input 标签
document.querySelectorAll('.isCalss');
</script>

除了通过 ID 选择器和 querySelector 选择器获取到的元素是唯一的，其余的选择器返回的是 伪数组的形式，可以通过 [下标] 的方式确定我们需要操作的元素。

 JavaScript 改变 HTML 元素：

方法                                                                         描述

元素.innerHTML = 内容                                         改变元素的内容（包含内部标签）可识别标签

元素.属性 = 属性值                                                改变 HTML 元素的属性值

元素.style.样式 = 样式值                                       改变 HTML 元素的样式

 改变 HTML 元素的样式时，样式如果为多个单词 - 拼接的，那么需要改成驼峰形式。

<div id="content"> 我是 DIV 标签 <p>我是 P 标签</p> </div>
<input type="text" id="inp" value="123" />
<div id="col"> 我是黑色 </div>
<script>
let content = document.getElementById('content');
content.innerHTML = "<h1>我是 H1 标签</h1>";
let inp = document.getElementById('inp');
inp.value = 456;
let col = document.getElementById('col');
col.style.backgroundColor = 'blue';
</script>

js中获取html和改变html是非常重要的，让我们深刻的记住它，让他们成为我们开发项目的左膀右臂，而不是我们进步的阻流，我们继续勤奋地学习，加油！