JZTXT

js-DOM

发布时间 2023-04-20 09:28:08作者: 挖洞404

1、介绍

DOM，document object model文档对象模型，向上属于window对象的属性，向下可以管理html元素及cookie。

2、获取元素

//基于元素id获取
document.getElementById('id')
//基于标签名的所有html元素
document.getElementByName('p')
//基于类名的所有html元素
document.getElementByClassName("intro")

3、节点

（1）创建新节点

appendChild，要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

//创建元素
var para = document.createElement("p");
//创建文本
var node = document.createTextNode("这是一个新的段落。");

（2）添加

//在一个元素中添加
para.appendChild(node);
 
var element = document.getElementById("div1");
//以倒序的方式最终挂载到一个已存在的元素，添加新元素到尾部，element和para是父子关系
element.appendChild(para);
//或者将元素添加到开始位置，element和para仍是父子关系，child也是element中的元素，则para将在child之前一位
var child = document.getElementById("p1");
element.insertBefore(para, child);

（3）移除

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

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

（4）替换

replaceChild(新, 旧)

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

4、方法

document.write('text')