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 对象有包含属性节点和文本节点。