JavaScript的DOM

Posted 2021-01-17 菜菜小谭

************************DOM 文档对象模型*****************************

一.什么是DOM

Document Object Model 文档对象模型

它是操作html和XML的一组API,可以实现动态改变页面内容的功能

例如: 京东的广告、菜单、搜索框获得焦点以后清空 都属于动态改变页面内容

DOM节点树: HTML或XML文档被浏览器加载到内存以后,会在内存中生成一个树状的结构,

这棵树叫做DOM节点树...

div、form、p 以前叫做标签

现在叫做DOM对象、DOM节点、DOM元素,每个标签都是 HTMLElement这个类的对象,形如

HTMLXXXElement,例如div标签是 HTMLDivElement类的对象,Form标签 是HTMLFormElement类
的对象

 

******************************节点的三种类型*******************************

<div id="div1">
我是div1
</div>

1.标签节点

div

2. 属性节点

id="div1"

3. 文本节点

我是div1

每个节点都是一个DOM对象

******************************DOM编程(CRUD)*******************************

一. 增加

需求: div2 后面 动态的增加一个 div5

 

1. 插入子级节点

父节点.appendChild(儿子节点)

2. 插入同级节点

父节点.insertBefore(新的,旧的);

DOM API 没有设计插入到某个节点后面的方法，所以如果想插入到div2后面,只能插入到div3的前面

二.删除

需求: div4 删掉

 

父节点.removeChild(儿子节点);

div4.parentNode.removeChild(div4);

三.修改

需求: 把div1 换成一个 文本框

 

父节点.replaceChild(新的,旧的);