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="http://www.sogou.com">点我去搜狗</a>
替换后
<div id="d2">
<a href="http://www.sogou.com">点我去搜狗</a>
</div>
内存中
- setAttribute（属性名，属性值）
- getAttribute（属性名）
- removeAttribute（属性名）
演练
前端的代码
在这里插入图片描述
标签对象.setAttribute（str属性名，属性值）
getAttribute（str属性名）
removeAttribute（str属性名）
- innerText
获取标签内的纯文本内容
- innerHTML
获取标签内的html内容
- innerText与innerHTML的区别
innerText，拿到的是标签对象里面包裹的纯的，文本内容
innerHTML，拿到的是标签对象中包裹的带有html标签的内容
- 用法
可以修改标签包裹的内容
