DOM（文档对象类型）

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

查找HTML元素

以下是通过document对象调用，来获取元素节点

通过id查找：

var x = document.getElementById("thisid");
//获取元素内部的HTML内容
alert(thisid.innerHTML);

通过标签名查找：

getElementByTagName()：可以通过标签名获取一组元素节点对象，这个方法返回一个类数组对象，所有查询到的元素都会封装到对象中。

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

通过类名查找：

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

改变HTML的内容

改变HTML内容：

document.getElementById(id).innerHTML = "这是新的HTML内容";

改变HTML属性：

document.getElementById(id).attribute = 新属性值;

改变HTML样式（css）：

document.getElementById.style.property = 新样式;

DOM事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
JavaScript和HTML之间的交互是通过事件实现的。
对于web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键等

例：

<button id="btn">
    我是一个按钮
</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
      
      
    alert("点我吧");
}
</script>

具体事件可查询：

https://www.runoob.com/jsref/dom-obj-event.html

DOM事件监听器

`addEventListener(event,function,useCapture)`

该方法为指定元素指定事件处理程序，该方法为元素附加处理程序而不会覆盖原有的事件处理程序
可以向一个元素添加多个处理事件
可以向一个元素添加多个相同类型的事件处理程序，例如两个click事件
参数：
- 第一个参数是事件的类型（比如“click” 或“mousedown”）
- 第二个参数是当时间发生时我们需要调用的函数
- 第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。默认是false，将使用事件冒泡。

`element.removeEventListener(event,myfunction)`

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

文档的加载顺序

如果script标签是写在body前面的，那要这样写：

<script>
    //onload事件会在整个页面加载完成之后才触发
window.onload = function(){
      
      
    ...
}
</script>

DOM元素（节点）

创建新的HTML元素（节点）

appendchild()方法

追加新元素作为父的最后一个子
先创建这个元素，然后将其追加到已有元素

<div id="div1">
    <p id="p1">这是一个段落</p>
    <p id="p2">这是另一个段落</p>
</div>
<script>
  //1、创建一个新元素
var para = document.createElement("p");
  //2、向p元素添加文本，创建一个文本节点
var node = document.createTextNode("这是新文本");
  //3、向p元素追加这个文本节点
para.appendChild(node);
  //4、向已有元素追加这个文本节点
var element = document.getElementById("div1");
element.appendChild(para);
</script>

创建新HTML元素–insertbefore()

父节点.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>

删除已有的HTML元素

父节点.removeChild(child)：如果删除某个HTML元素，需要知晓该父元素，从父删除子

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

parentnode：用来获取子元素的父元素，更方便，直接写这个，都不用去管父元素是谁

son.parentNode.removeChild(son);

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

获取元素节点的子节点

通过具体的元素节点调用

1、getElementsByTagName()

-方法，返回当前节点的指定标签名后代节点

2、childNodes

属性，表示当前节点的所有子节点
会获取包括文本节点在内的所有子节点

3、firstChild

属性，表示当前节点的第一个子节点

4、lastChild

属性，表示当前节点的最后一个子节点

5、children

可以获取当前元素的所有子元素，不会包括文本节点等

获取父节点和兄弟节点

通过具体的节点调用

1、parentNode

属性，表示当前节点的父节点

2、previousSibling

属性，表示当前节点的前一个兄弟节点

3、nextSibling

属性，表示当前节点的后一个兄弟节点

其他补充

innerHTML和innerText

innerHTML会获取到元素内部的标签即元素内容
innerText可以获取到元素内部的文本内容，他和innerHTML类似，不同的是她会自动将html去掉

JS基础_DOM