js之DOM概述

参考：https://www.runoob.com/js/js-htmldom.html

介绍

DOM，document object model文档对象模型。

现在几乎所有浏览器都支持DOM，用全局对象document表示。

获取元素对象

https://www.cnblogs.com/heibaimao123/p/16276959.html

操作元素对象

https://www.cnblogs.com/heibaimao123/p/16277512.html

document.write

<script>
document.write(Date());
</script>

• 相当于直接输出html内容
• 不能在文档加载完成后执行，会覆盖整体页面

事件

1、标签中声明事件

<button onclick="alert(123)">点击</button>

2、js事件监听

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

3、js添加事件

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

元素对象

1、创建

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");

2、添加

element.appendChild(para);

element.insertBefore(para, child);

添加到尾部或者在child元素之前

3、移除

parent.removeChild(child);

4、替换

parent.replaceChild(para, child);

HTMLCollection

js获取一组对象时，返回类型一般是HTMLCollection类型。

可以像数组一样，使用索引来获取元素。但并不是数组。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

NodeList

与HTMLCollection很相似，是querySelectorAll()方法的返回类型，用于存储节点对象集合。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

只有 NodeList 对象有包含属性节点和文本节点。

document.cookie