zoukankan      html  css  js  c++  java
  • javaScript DOM编程

    1.DOM概述

    1.1.        什么是DOM?

        DOM= Document Object Model文档对象模型 DOM W3C(万维网联盟)的标准。DOM 定义了访问 HTML XML 文档的标准:独立于平台和语言的接口. W3C DOM 标准被分为 3 个不同的部分:

        核心 DOM - 针对任何结构化文档的标准模型

        XML DOM - 针对 XML 文档的标准模型

        HTML DOM - 针对 HTML 文档的标准模型

     

    1.2.        什么是HTML DOM?

     HTML DOM 定义了访问和操作HTML文档的标准方法。HTML DOM HTML 文档呈现为带有元素、属性和文本的树结构(节点树)

     当我们用浏览打开一个html文件时, 浏览器内置的HTML解析引擎就会将整个文档加载到内存中, 并根据HTML DOM定义的接口和实现类生成一个包含文件内所有数据的DOM对象树.

    <html>

       <head>

          <title>文档标题</title>

       </head>

       <body>

          <h1>我的标题</h1>

          <a href="http://www.atguigu.com">我的链接</a>

       </body>

    </html>

    2.  HTML DOM核心: 节点

    2.1.       HTML节点(Node)

    •     HTML文档中的每个成分都是一个节点。
    •     整个文档是一个文档节点(Document)
    •     每个 HTML 标签是一个元素节点(Element)
    •     每一个 HTML 属性是一个属性节点(Attribute)
    •     包含在 HTML 元素中的文本是文本节点(Text

    2.2.       Node层次

    •     DOM中的节点彼此都有等级关系。
    •     HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

    2.3.       HTML DOM节点树

    •         一棵节点树中的所有节点彼此都是有关系的

      <html>

        <head>

          <title>DOM Tutorial</title>

        </head>

        <body>

          <h1>DOM Lesson one</h1>

          <p>Hello world!</p>

        </body>

      </html>

      父节点

      除文档节点之外的每个节点都有父节点

      子节点

      大部分元素节点都有子节点

      同辈节点

      当节点分享同一个父节点时,它们就是同辈

      后代节点

      后代指某个节点的所有子节点

      先辈节点

      先辈是某个节点的父节点,或者父节点的父节点,以此类推

      3.   DOM操作

    • 3.1HTML DOM访问节点(查询)

    • 对象类型

      属性/方法

      说明

      文档/元素节点

      getElementById(id)

      根据标签的id得到对应的标签对象

      文档/元素节点

      getElementsByTagName(tag)

      根据标签名得到对应的所有子标签对象的集合(数组)

       

       

       

      节点

      nodeName

      得到节点名

      节点

      nodeValue

      得到节点的值

      节点

      nodeType

      节点类型值

       

       

       

      元素节点

      childNodes

      得到所有子节点的集合(数组)

      元素/文本节点

      parentNode

      得到父节点对象(标签)

      元素节点

      firstChild

      得到第一个子节点(标签/文本)

      元素节点

      lastChild

      得到最后一个子节点(标签/文本)

       

       

       

      元素节点

      getAttributeNode(attrName)

      根据属性名标签的属性节点

    • 3.3.       HTML DOM的增删改

    • 对象类型

      属性/方法

      说明

      文档节点

      createElement(tagName)

      创建一个新的元素节点对象

      文档节点

      createTextNode(text)

      创建一个文本节点对象

       

       

       

      元素节点

      appendChild(node)

      将指定的节点添加为子节点

      元素节点

      insertBefore(new,target)

      在指定子节点的前面插入新节点

       

       

       

      元素节点

      replaceChild(new, old)

      用新节点替换原有的旧子节点

      元素节点

      removeChild(childNode)

      删除指定的子节点

      元素节点

      setAttribute(name, value)

      为标签添加一个属性

      元素节点

      removeAttribute(name)

      删除指定的属性

       

       

       

      元素节点

      innerHTML

      向标签中添加一个标签

      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <title>HTML DOM编程测试</title>

      <style type="text/css">

      ul {

          list-style-type: none;

      }

       

      li {

          border-style: solid;

          border- 1px;

          padding: 5px;

          margin: 5px;

          background-color: #99ff99;

          float: left;

      }

       

      .out {

          400px;

          border-style: solid;

          border- 1px;

          margin: 10px;

          padding: 10px;

          float: left;

      }

      </style>

      </head>

      <body>

          <div class="out">

             <p>你喜欢哪个城市?</p>

             <ul id="city">

                 <li id="bj" name="BeiJing">北京</li>

                 <li>上海</li>

                 <li id="dj">东京</li>

                 <li>首尔</li>

             </ul>

             <br>

             <div id="inner"></div>

          </div>

      </body>

      </html>

    来自张晓鹏的博文
  • 相关阅读:
    L1-012 计算指数
    L1-011 A-B
    L1-010 比较大小
    Django--登录
    Django--跨域设置
    Django--视图装饰器
    Django--URL配置
    Django--多数据库
    Django--channels
    Django--日志
  • 原文地址:https://www.cnblogs.com/zhangxiaopeng/p/4793102.html
Copyright © 2011-2022 走看看