章节
问答
课签
笔记
评论
占位
占位

认识DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合,DOM节点有:

1. 元素节点:上图中<html>、<body>、<p>等都是元素节点,即标签。

2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

以上图ul为例,它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

注意:前两个是document方法。

 

 

任务

在JavaScript入门篇中,对DOM进行了基础讲解(http://www.imooc.com/learn/36),我们通过任务来回顾下。

在右边编辑器第11行补充代码,通过getElementById获取id为con的h2标签。

在右边编辑第12行补充代码,修改h2标签的样式,将颜色设为红色。

在右边编辑器第13行补充代码,修改h2标签的样式,将背景颜色设为灰色(#CCC)。

在右边编辑第14行补充代码,通过style.display实现隐藏。

?不会了怎么办

var mychar = document.getElementById("con");  

mychar.style.color="red";

mychar.style.backgroundColor ="#ccc";

mychar.style.display="none";

||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕码人7255994
经测试,可以实现,估计网站不认而已

+ 我来回答 回答最高可+2积分

最新回答 / 蓝博士
用js代码改样式后期用到的不多

最新回答 / Dr_麦
任务在JavaScript入门篇中,对DOM进行了基础讲解(http://www.imooc.com/learn/36),我们通过任务来回顾下。在右边编辑器第11行补充代码,通过getElementById获取id为con的h2标签。在右边编辑第12行补充代码,修改h2标签的样式,将颜色设为红色。在右边编辑器第13行补充代码,修改h2标签的样式,将背景颜色设为灰色(#CCC)。在右边编辑第14行补充代码,通过style.display实现隐藏。

最赞回答 / 阳火锅
<...图片...>这里都是等于号,不是冒号

已采纳回答 / weixin_慕丝3024162
没有问题的 显示隐藏需要点击才能实现

最赞回答 / coolman0o0
<...code...><!DOCTYPE HTML><html> &t;hhead&t;   &;memeta http-equiv="Content-Type" content="text/html; charset=utf-8" /&;    &tittitle&stystyle样式&le&/title&t;s  &>style&con    #con {        color:red;        backgroun...

已采纳回答 / dppird
//hideen这个函数名和关键字hidden冲突了,改下函数名就可以了 function hidden() {    }

已采纳回答 / qq_慕少4144776
mychar.style.display="none";你设置 的隐藏属性
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言