【Javascript】DOM文档

目录

DOM

Html与txt的不同

打印html

打印txt

​编辑 

对dom节点的常规操作

查找节点

通过id查找节点

通过类名来查找元素

通过标签查找元素

改变元素的内容

改变元素的 inner HTML

改变前

改变后 

 改变元素的 inner HTML

改变 HTML 元素的属性值

 


DOM

  • DOM就是⽂档对象模型,是⼀个抽象的概念
  • 定义了访问和操作HTML⽂档的⽅法

Html与txt的不同

打印html

你好

【Javascript】DOM文档_第1张图片

打印txt

你好

【Javascript】DOM文档_第2张图片 

  • HTML是有组织的结构化⽂件

对dom节点的常规操作

查找节点

通过id查找节点

你好

【Javascript】DOM文档_第3张图片

通过类名来查找元素

你好

正在学习

 

【Javascript】DOM文档_第4张图片 

是一个对象的形式

【Javascript】DOM文档_第5张图片 

【Javascript】DOM文档_第6张图片 

只写了一个p标签,他的数组下标为0 

【Javascript】DOM文档_第7张图片 

通过标签查找元素

你好

 

 【Javascript】DOM文档_第8张图片 

改变元素的内容

改变元素的 inner HTML

你好

改变前

【Javascript】DOM文档_第9张图片

改变后 

【Javascript】DOM文档_第10张图片

 改变元素的 inner HTML

你好

【Javascript】DOM文档_第11张图片

 从图可以知道outerHTML改变的是标签

改变 HTML 元素的属性值

例如改变id值

你好

ctrl+shift+j打开控制台查看Elements 

【Javascript】DOM文档_第12张图片

这里只是举了一个例子,还可以写改变其他属性 

 

你可能感兴趣的:(Javascript,javascript,前端,开发语言)