认识DOM

字号+ 编辑: Snake 修订: 德玛西亚 来源: 慕课网 2023-09-05 我要说两句(0)

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

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

先来看看下面代码:

<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>DOM</title>
</head>
<body>
   <h2><a href="https://www.wkwkk.com/">javascript DOM </a></h2>
   <p>对HTML元素进行操作,可添加、改变或移除CSS样式等</p>
   <ul>
      <li>JavaScript</li>
      <li>DOM</li>
      <li>CSS</li>
   </ul>
</body>
</html>

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

 图片10.png

HTML文档可以说由节点构成的集合,三种常见的DOM节点:

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

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

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

看下面代码:

<a href="http://www.imooc.com">JavaScript DOM</a>

图片11.png

阅完此文,您的感想如何?
  • 有用

    0

  • 没用

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.Q群: 2702237 13835667

相关课文
  • JS如何防止父节点的事件运行

  • nodejs编写一个简单的http请求客户端代码demo

  • 说一则为什么后端开发人员不选择node.js的原因

  • 使用Sublime Text3 开发React-Native的配置

我要说说
网上嘉宾点评