前端学习之路JS（02）-HTML DOM_js设置元素内容时会改变整个html文档页面的是什么-CSDN博客

本文链接：https://blog.csdn.net/weixin_36244867/article/details/64922285

DOM 简介

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

这里写图片描述

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

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

我们想改变HTML元素，首先必须要找到它，有三种方式我们可以找到HTML元素。

1. 通过Id查找HTML元素

<p id="demo"></p>
<script >
    var value = document.getElementById("demo");
    value.innerHTML = "demo";
</script>

2. 通过标签名查找 HTML 元素

getElementsByTagName，找到某一父类下所有同样标签的元素，类型是数组；

<body >
<div id="myDiv">
    <p></p><br
    <p></p>
</div>
<script >
    var father = document.getElementById("myDiv");
    var son = father.getElementsByTagName("p");
    son[0].innerHTML = "son1";
    son[1].innerHTML = "son2";
</script>
</body>

以上例子，先找到父元素div，通过tag找到div下所有的p元素。

3. 通过类名找到 HTML 元素

getElementsByClassName ，参见，和id方式大同小异

DOM HTML

HTML DOM允许JS改变 HTML 元素的内容。

1. 改变HTML输出流

在 JS中，document.write() 可用于直接向 HTML 输出流写内容，例子。
注意：绝对不要在文档加载完成之后使用 document.write()，这会覆盖该文档。

2. 改变HTML内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性，例子。

3. 改变HTML属性

如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=新属性值；
例子

DOM CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=新样式；
例子

DOM 事件

HTML DOM 使JS有能力对HTML事件做出反应，如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JS代码：οnclick=JavaScript。例子。

分配事件的两种方式，以点击事件为例

// 方式1，向html元素设置事件属性
<body>
<button id="commit" onclick="commit()">提交</button>
</body>

// 方式2，通过HTML DOM分配事件
<script>
doucment.getElementById("commit").onclick = function(){commit()};
</script>

HTML DOM提供的事件

onchange，html元素改变；
onclick，用户点击html元素；
onmouseover，用户在html元素上移动鼠标；
onmouseout，用户从html元素上移开鼠标；
onkeydown，用户按下键盘按键；
onload，浏览器完成页面加载。

DOM EventListener

添加事件方法

element.addEventListener(event, function, useCapture);

参数1，事件的类型 (如 “click” 或 “mousedown”)，事件去掉on，比如onclick–>click；
参数2，事件触发后调用的函数；
参数3，布尔值用于描述事件是冒泡还是捕获，该参数是可选的，后续再讲；
用于向指定元素添加事件句柄；
添加的事件句柄不会覆盖已存在的事件句柄；
向一个元素添加多个事件句柄；
向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件；
向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象；
可以使用 removeEventListener() 方法来移除事件的监听。
element.removeEventListener(“mousemove”, myFunction);

//内部函数
element.addEventListener("click", function(){ alert("Hello World!"); });
//调用外部函数
element.addEventListener("click", functionName);

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获，即事件传递顺序。div中有个p，例子。
冒泡传递（默认），false。内部元素的事件会先被触发，然后再触发外部元素，即： p元素的点击事件先触发，然后会触发div元素的点击事件。
捕获传递，true。外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div元素的点击事件先触发，然后再触发p元素的点击事件。

DOM 元素

我们可以在HTML中直接定义元素，也可以通过JS方式来新增、删除元素。

创建新的 HTML 元素

分两步走：

创建该元素（元素节点）；
然后向一个已存在的元素追加该元素appendChild。

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

<script>
// 这段代码创建新的p元素
var para=document.createElement("p");
// 如需向p元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点
var node=document.createTextNode("这是一个新段落。");
// 向p元素追加这个文本节点：
para.appendChild(node);

//找到一个已有的元素
var element=document.getElementById("div1");
//在已存在的元素后添加新元素
element.appendChild(para);
</script>

删除已有的 HTML 元素

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

var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

总结

HTML DOM 实例
 HTML DOM 参考手册
 更加完整的DOM教程