dom

文档对象模型

html文档树模型

通过对dom的处理可以实现

查找标签对象-直接查找

当前代码

效果

通过ID，类名，标签来找

通过div来找，找到两个

查找标签对象-间接查找

parentElement，查找父标签

找到了一组标签，要得到他们的父标签，报错

寻找父级标签，应该先找到一个标签对象

然后再找

课堂练习

同理，其它的一些关系的属性名称可记录一下

children，所有的子标签。 [标签1，标签2]

firstElementChild， 所有子标签中第一个。 标签

lastElementChild， 所有子标签中最后一个

nextElementSibling， 下一个兄弟标签

previousElementSibling， 上一个兄弟标签

创建标签

练习源码

演示步骤

给a标签添加文本内容

标签对象.text属性= 赋与的值

我是div我是新来的超链接

给a标签添加href属性

a标签对象.属性 = 值

我是div我是新来的超链接

标签对象的增删改操作

appendChild，添加子标签

父标签对象.appendChild(节点标签对象）

父标签添加子标签

removeChild，移出子标签

父标签.removeChild（子标签）

父标签对象.removeChild（子标签对象）

insertBefore，插入子标签

父标签.insertBefore(要插入的标签x， 子标签）

在哪个父标签的哪个子标签前面插入标签x

例子

父标签对象.insertBefore（插入的标签，参考标签-明确在哪个标签前面插)

replaceChild（新标签，要被替代的标签）

父标签.replaceChild（新来的标签，被替换的标签）

效果

替换前

<div id="d2"><p></p></div>内存中<a href="">点我去搜狗</a>

替换后

<div id="d2"><a href="">点我去搜狗</a></div>内存中

自定义属性

setAttribute（属性名，属性值）getAttribute（属性名）removeAttribute（属性名）

演练

前端的代码

在这里插入图片描述

标签对象.setAttribute（str属性名，属性值）

getAttribute（str属性名）

removeAttribute（str属性名）

获取标签的内容

innerText

获取标签内的纯文本内容

innerHTML

获取标签内的html内容

innerText与innerHTML的区别

innerText，拿到的是标签对象里面包裹的纯的，文本内容

innerHTML，拿到的是标签对象中包裹的带有html标签的内容

用法

可以修改标签包裹的内容