DOM: Document Object Model(文档对象模型)的简写,那么,这是一种什么样的模型,简单点来说,就是将文档当成了一棵树。它独立于平台与语言,允许程序与脚本动态地访问、更新文档的结构、内容、样式。

1.DOM的分类:

核心DOM:针对任何结构化文档的标准模型
XML DOM:针对XML文档的标准模型。定义了所有XML元素的对象和属性,以及访问它们的方法
HTML DOM:针对HTML文档的标准模型。定义了所有HTML元素的对象和属性,以及访问它们的方法。HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准

2.DOM节点:
     上面说到DOM将文档当成了一棵树。那么,所有事物都是节点,DOM是视为节点树的HTML。


    
     通过HTML DOM,树中所有节点都可通过js访问。所有HTML节点都可被修改、增加或删除
    
3.DOM方法:可以在节点(HTML元素)上执行的动作
    getElementById    getElementsByTagName    getElementsByClassName
    appendChild      removeChild                replaceChild
    createElement    createTextNode            createAttribute

4.DOM属性: 节点(HTML元素)的值,可以获取、设置
  
    innerHTML  parentNode    childNodes    attributes    nodeName    nodeValue    nodeType
       
5.DOM事件:HTML DOM允许js对HTML事件作出反应,onclick=JavaScript
      
    HTML事件例子:
        点击事件    网页加载    图片加载    鼠标移动在元素上    输入内容改变    表单提交
    
    向元素分配事件,使用元素的事件属性:
        <input type="button" onclick="disDate()" value="显示日期" />
        
    使用js向HTML元素分配事件:
        <script type="text/javascript">
            document.getElementById("myBut").onclick=function(){...}
        </script>
    
    onclick    onload    onunload    onchange    onmouseover    onmouseout    onmousedown    onmouseup

总结:这只是作者本人在平时看书时总结出来的一些知识要点,简单点来说,HTML DOM就是将HTML文档视为一棵树,HTML文档的标签以及标签中的一些属性都被视为树中的节点,我们可以通过js对树中的节点进行操作。但要想对HTML DOM有个全面而深刻的了解,还是需要看下书的。有啥不足,望指正

HTML DOM--基础概述的更多相关文章

  1. JavaScript之DOM等级概述

    这两日对DOM等级的理解不是太通透,就进Mozilla官网去看了一下,然后进行了首次的对技术文档的翻译工作,虽然官网也有中文解释,但我想,自己翻译出来时,已经有了原汁原味的理解了吧,这边是做此次翻译的 ...

  2. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  3. Javascript DOM基础(一)概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  4. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  5. Laxcus大数据管理系统2.0(2)- 第一章 基础概述 1.1 基于现状的一些思考

    第一章 基础概述 1.1 基于现状的一些思考 在过去十几年里,随着互联网产业的普及和高速发展,各种格式的互联网数据也呈现爆炸性增长之势.与此同时,在数据应用的另一个重要领域:商业和科学计算,在各种新兴 ...

  6. 【MySQL】MySQL无基础学习和入门之一:数据库基础概述和实验环境搭建

    数据库基础概述  大部分互联网公司都选择MySQL作为业务数据存储数据库,除了MySQL目前还有很多公司使用Oracle(甲骨文).SQLserver(微软).MongoDB等. 从使用成本来区分可以 ...

  7. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  8. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  9. DOM基础(四)

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  10. DOM基础(二)

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

随机推荐

  1. 用 GDB 调试程序

    Linux 包含了一个叫 gdb 的 GNU 调试程序. gdb 是一个用来调试 C 和 C++ 程序的强力调试器. 它使你能在程序运行时观察程序的内部结构和内存的使用情况. 以下是 gdb 所提供的 ...

  2. [C++] const inside class VS const outside class

    const inside class VS const outside class 类内:类内的const和c语言一样,可以通过指针间接修改const变量的值,读内存,一开始必须初始化 类外:虽然可以 ...

  3. 冲刺NOIP2015提高组复赛模拟试题(五)1.数学作业

    1. 数学作业 [问题描述] 路人丙的数学老师非常乏力,他喜欢出一些非常乏力的数学题来为难乏力的学生们.这次数学老师布置了一堆的数学题作为作业,而且这些数学题有个共同的特点是都求C(N,M)中不同质因 ...

  4. meshconverters

    https://github.com/RobotLocomotion/meshConverters meshconverters $ mkdir build && cd build $ ...

  5. python3--json反序列化

    # Auther: Aaron Fan # 加载文件中的数据 import json with open('test.txt','r',encoding='utf-8') as f: info = j ...

  6. Spring Boot☞ 使用freemarker模板引擎渲染web视图

    效果图 代码 package com.wls.integrateplugs.hello.controller; /** * Created by wls on 2017/8/24. */ import ...

  7. python 数据合并

    1. 数据合并 前言 一.横向合并 1. 基本合并语句 2. 键值名不一样的合并 3. “两个数据列名字重复了”的合并 二.纵向堆叠 统计师的Python日记[第6天:数据合并] 前言 根据我的Pyt ...

  8. Javascript 链式作用域 function fn(){}和var fn=function(){}区别

    其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但 ...

  9. Transaction And Lock--解决死锁/锁的几种有效方式

    修改资源访问顺序,使多个事务对资源的访问方式一致优化查询SELECT,使得S锁能尽早释放均可能将更新和删除语句放到事务末端(使得X锁占用时间最小)避免事务执行期间暂停或等待外部输入将较大事务拆分成多个 ...

  10. html 线条重叠变粗

    加入属性 单元格重叠变粗 使用border-collapse:collapse;  可以解决.