html DOM定义了访问和操作html文档的标准;dom是w3c的标准,dom定义了访问html和xml文档的标准:

w3c文档对象模型(dom)是中立平台和语言的接口,它允许程序和脚本动态访问和更新文档内容,结构和样式.

dom标准被分为3个不同部分:

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

2.xml dom - 针对xml文档的标准模型

3.html dom - 针对html文档的标准模型

xml dom定义了xml元素对象和属性,以及访问它们的方法

html dom定义了所有html元素的对象和属性,以及访问它们的方法,换言之,html dom是关于如何获取,修改,添加或删除html元素的标准.

html dom中,所有事物都是节点,dom被视为节点树的html.根据w3c的dom标准,html文档中所有内容都是节点:

1.整个文档是一个文档节点

2.每个html元素是元素节点

3.html元素内的文本是文本节点

4.每个html属性是属性节点

5.注释是注释节点

html dom将html文档视作树结构,这种结构被称为节点树,通过dom,树中所有节点均可通过js访问,所有节点元素均可被修改,也可创建或删除节点.

节点树中的节点彼此拥有层级关系:父,子,同胞等:

1.节点树中,顶端节点称为根

2.每个节点有父节点,除了根

3.一个节点可拥有任意数量的子

4.同胞是拥有相同父节点的节点

dom处理中常见错误是希望元素节点包含文本.

方法是我们可以在节点(html元素)上执行的动作.以下是常用的dom对象方法:

getElementById()方法返回带有指定id的元素

appendChild(node) 插入新的子节点

removeChild(node)删除子节点

下面是常用的dom属性:

innerHTML 节点的文本值

parentNode 节点的父节点

firstChild和lastChild 不用解释吧

childNodes 节点的子节点

attributes 节点的属性节点

length属性定义节点列表中节点的数量

getElementsByTagName 返回带有指定标签的所有元素:

var x = document.getElementsByTagName("p"); 选取文档中的所有<p>节点.可以通过下标访问这些节点比如访问第二个节点:item = x[1];

getElementsByClassName 返回相同类名的所有html元素

html dom允许你在事件发生时执行代码

如果删除html元素,必须清楚该元素的父元素

html dom允许用js向html元素分配事件:

document.getElementById("id").onclick = function(){displayDate()};

以上代码将displayDate函数分配给了id为'id'的html元素的onclick回调.

当用户进入或离开页面时,会触发onload和onunload事件;

onchange事件可以用于输入字段的验证

onmouseover和onmouseout可用于在鼠标指针移动到或离开元素时触发函数;

onmousedown,onmouseup以及onclick事件是鼠标点击全部过程,鼠标按钮点击时触发onmousedown事件,当鼠标松开时触发onmouseup事件,最后当鼠标完成点击时,触发onclick事件.

document.documentElement -  全部文档

document.body - 文档主体

恶补web之七:html DOM知识的更多相关文章

  1. 恶补web之二:css知识(3)

    css有3种定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定. 通过使用position属性,可以选择4种不同类型的 ...

  2. 恶补web之二:css知识(2)

    css字体属性定义文本的字体系列,大小,加粗,风格和变形等. css中包含两种字体系列:通用字体系列和特定字体系列. font-family属性定义文本的字体系列: body {font-family ...

  3. 恶补web之二:css知识(1)

    css指层叠样式表(Cascading Style Sheets)     样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式 ...

  4. 恶补web之一:html学习(1)

    发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...

  5. 恶补web之六:javascript知识(2)

    若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...

  6. 恶补web之六:javascript知识(1)

    javascript(下称js)是一种轻量级编程语言,它可以插入html页面然后由浏览器执行. document.write("<h1>...</h1>") ...

  7. 恶补web之八:jQuery(3)

    jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...

  8. 恶补web之八:jQuery(2)

    jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...

  9. 恶补web之五:dhtml学习

    dhtml是一种使html页面具有动态特性的艺术.对于多数人来说dhtml意味着html(html DOM),样式表和javascript的组合. dhtml不是w3c标准.dhtml指动态html, ...

随机推荐

  1. 关于React Native项目在android上UI性能调试实践

    我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到.要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是统一处理的,这意味着你没办法像iOS那样 ...

  2. 【一天一道LeetCode】#119. Pascal's Triangle II

    一天一道LeetCode 本系列文章已全部上传至我的github,地址:ZeeCoder's Github 欢迎大家关注我的新浪微博,我的新浪微博 欢迎转载,转载请注明出处 (一)题目 Given a ...

  3. .NET 连接SQL Server2012遇到的连接出错问题解析

    最近在用VS2013编写相关于SQL Server数据库的代码,但是却遇到了艰难的bug问题,那就是在进行连接的时候出现了各种异常. 出错分析 1.首先应该想到的是数据库的相关服务没有开启. 因为默认 ...

  4. EBS条形码打印

    Oracle  提供两种方式实现 128 码的编码 第一种方式是使用 Reports Builder 实现对 128 码编码, 在 Metalink 305090.1[1]  有 比较详尽的描述,其中 ...

  5. CUDA学习,使用shared memory实现Reverse Array

  6. 基于HTTP头部的注入

    基于HTTP头部的注入 常见的sql注入一般都是通过表单或请求参数进行注入,但这里给出的例子是通过HTTP协议头部进行注入. 例如一个的请求如下: GET / HTTP/1.1 Host: www.e ...

  7. Chapter 2 User Authentication, Authorization, and Security(6):服务器权限授予粒度

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38867489,专题目录:http://blog.csdn.net/dba_huangzj ...

  8. STL:字符串用法详解

    字符串是程序设计中最复杂的变成内容之一.STL string类提供了强大的功能,使得许多繁琐的编程内容用简单的语句就可完成.string字符串类减少了C语言编程中三种最常见且最具破坏性的错误:超越数组 ...

  9. 【IOS 开发】Object-C 入门 Xcode 环境详解

    作者 : 韩曙亮 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/38424965 一. Xcode 环境安装 与 工程创建 1. ...

  10. vim的modeline

    vim的modeline可以让你针对每个文件进行文件级别的设置,这些设置是覆盖当前用户的vimrc中的设置的.vim默认关闭modeline,开启的话需要在你的home下的.vimrc文件中增加一行: ...