zoukankan      html  css  js  c++  java
  • DOM节点

    转载于:http://www.imooc.com/code/1575

     

    认识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方法。

    js操作dom对象实例:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>style样式</title>
    </head>
    <body>
      <h2 id="con">I love JavaScript</H2>
      <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
      <script type="text/javascript">
       
        var con=document.getElementById('con');
        con.style.color='red';
        con.style.backgroundColor='#ccc';
        con.style.display;
       </script>
    </body>
    </html>
  • 相关阅读:
    Linux里的2>&1究竟是什么
    表锁操作
    日志rsyslog
    计划任务at cron
    rpm包管理和源码包管理
    自建yum源(只演示nginx服务,其它都一样)
    软件包管理yum
    文件打包及压缩
    查找文件which locate find
    lsof恢复进程打开的文件
  • 原文地址:https://www.cnblogs.com/superxuezhazha/p/6413337.html
Copyright © 2011-2022 走看看