dom

文档对象模型

html文档树模型

通过对dom的处理可以实现

查找标签对象-直接查找

当前代码

效果

通过ID，类名，标签来找

通过div来找，找到两个

查找标签对象-间接查找

parentElement，查找父标签

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

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

然后再找

课堂练习

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

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

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

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

nextElementSibling，下一个兄弟标签

previousElementSibling，上一个兄弟标签

创建标签

练习源码

演示步骤

给a标签添加文本内容

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

我是div我是新来的超链接

给a标签添加href属性

a标签对象.属性 = 值

我是div我是新来的超链接

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190812212611924.png)

标签对象的增删改操作

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标签的内容

用法

可以修改标签包裹的内容

javascript-dom-文档对象模型相关推荐

BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...
DOM 文档对象模型
DOM 文档对象模型 1. Web API 的概念 api:应用程序接口.是基于编程语言构建的结构,使开发人员更容易地创建复杂的功能 Web API:是 Web 的应用程序编程接口,浏览器 API 可 ...
前端（五）DOM 文档对象模型
注:变量声明尽量用const,const语义化更好,发现变量需要修改(修改值,而非地址)时再改为let(可以重新赋值),var很少用.简单数据类型.(值经常改变时用let) 下面假装我们javascr ...
APl DOM文档对象模型
文章目录一.DOM简介 1.什么是DOM 2.DOM 树二.获取元素的方法 1.根据ID获取 2.根据标签名获取 3.通过 HTML5 新增的方法获取(注意兼容) 4.获取特殊元素(body,ht ...
web前端学习day_03:JavaScript:如何使用/ 语法/ 方法/ NaN/ js对象分类/ BOM浏览器相关/ 事件/ DOM文档对象模型
JavaScript 给页面添加动态效果 JavaScript是一门编程语言,和Java没有关系,为了蹭热度. 语言特点: 属于脚本语言,不需要编译直接解析执行. 基于面向对象属于弱类型语言, 强类 ...
文档对象模型DOM（获取元素节点、设置节点属性）
练习题: 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...
dom文档对象手册_DOM总结
一.DOM是一棵树,树上有Node,Node分为 Document.Element(元素)和 Text(文本),以及其他不重要的. 二.浏览器原生提供document节点,代表整个文档, 文档的第一层 ...
java dom遍历_JavaScript DOM文档遍历实战
在介绍了<JavaScript DOM修改文档树方法实例>与<JavaScript DOM实战:创建和克隆元素>,本文将介绍JavaScript DOM文档遍历的详细知识,我们 ...
javascript-----DOM文档对象模型
1.DOM分类 DOM:文档对象模型,提供了添加.移动.该变.或移除的结构文档的方法和属性 DOM Core:锁定一批标签,看成dom对象,进行业务分析 HTML DOM :把标签和属性看成是一个DO ...
javaScript文档对象模型DOM
文档对象模型DOM 文档对象模型(document object model) 有一个表格,点击添加按钮添加事件 DOM中的属性和方法的理解 DOM中属性的操作: 属性映射表文档对象模型(docum ...

javascript-dom-文档对象模型