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

posted @ 2022-05-16 20:08  黑白猫123  阅读(116)  评论(0编辑  收藏  举报