恶补web之七:html DOM知识
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知识的更多相关文章
- 恶补web之二:css知识(3)
css有3种定位机制:普通流,浮动和绝对定位. 除非专门指定,否则所有框都在普通流中定位,即普通流中的元素位置由元素在(x)html中的位置决定. 通过使用position属性,可以选择4种不同类型的 ...
- 恶补web之二:css知识(2)
css字体属性定义文本的字体系列,大小,加粗,风格和变形等. css中包含两种字体系列:通用字体系列和特定字体系列. font-family属性定义文本的字体系列: body {font-family ...
- 恶补web之二:css知识(1)
css指层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素,样式通常存储在样式表里.把样式添加到html4.0中,是为了解决内容与表现分离的问题.外部样式 ...
- 恶补web之一:html学习(1)
发现以前欠下的web知识太多鸟,只有重头开始好好学吧,恶补第一站就是html知识啦! html指的是超文本标记语言,它不是编程语言,而是一种标记语言;标记语言是一套标记标签(markup tag),h ...
- 恶补web之六:javascript知识(2)
若要向html添加新元素,必须首先创建该元素,然后向一个已存在的元素追加该元素 <div id="div1"> <p id="p1">这 ...
- 恶补web之六:javascript知识(1)
javascript(下称js)是一种轻量级编程语言,它可以插入html页面然后由浏览器执行. document.write("<h1>...</h1>") ...
- 恶补web之八:jQuery(3)
jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...
- 恶补web之八:jQuery(2)
jquery中非常重要的部分,就是操作dom的能力: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括html标记) val() - 设置或返回表单字段 ...
- 恶补web之五:dhtml学习
dhtml是一种使html页面具有动态特性的艺术.对于多数人来说dhtml意味着html(html DOM),样式表和javascript的组合. dhtml不是w3c标准.dhtml指动态html, ...
随机推荐
- spark idea 的配置问题
不知道下面的错误是为什么? Error:scalac: missing or invalid dependency detected while loading class file 'RDD.cla ...
- Android首选项SharedPreference-android学习之旅(六)
SharedPrefenence采用的键值对的方式来进行存储,采用内部存储的方式. 实例 public class MainActivity extends Activity { private Sh ...
- Scipy教程 - 优化和拟合库scipy.optimize
http://blog.csdn.net/pipisorry/article/details/51106570 最优化函数库Optimization 优化是找到最小值或等式的数值解的问题.scipy. ...
- SpringMVC源码分析--容器初始化(四)FrameworkServlet
在上一篇博客SpringMVC源码分析--容器初始化(三)HttpServletBean我们介绍了HttpServletBean的init函数,其主要作用是初始化了一下SpringMVC配置文件的地址 ...
- Common Bit Tasks
1) If you XOR a bit with its own negated value, you will always get 1. Therefore thesolution to a ^ ...
- 部署Openfire3.9.3源码部署
1,下载Openfire3.9.3源码代码:http://www.igniterealtime.org/downloads/index.jsp 2,具体的配置请参考http://blog.csdn.n ...
- hive中与hbase外部表join时内存溢出(hive处理mapjoin的优化器机制)
与hbase外部表(wizad_mdm_main)进行join出现问题: CREATE TABLE wizad_mdm_dev_lmj_edition_result as select * from ...
- 海量数据挖掘MMDS week7: 局部敏感哈希LSH(进阶)
http://blog.csdn.net/pipisorry/article/details/49686913 海量数据挖掘Mining Massive Datasets(MMDs) -Jure Le ...
- PA 模块常用表2
SELECT * FROM pa_expenditure_items_all 项目支出 select *from pa_cost_distribution_lines_all 支出分配行 SELE ...
- Visual Studio 2010多线程编程
随着处理数据量的逐渐增大,串行单核的程序,犹如残灯缺月,无法满足运用需求.大规模集群的出现,解决了这一技术难题.本文旨在探讨如何使用多CPU并行编程,关于CUDA的并行前面文章已有讲述.本文结构分为三 ...