HTML DOM (一):DOM理解

原创 2015年11月19日 18:08:45

什么是DOM? – –文档对象模型(Document Object Model)。

呃,这是官方的说法。

首先,DOM是元素,是对象。是个东西,所以,我们才能操作她(操练起来),操作什么?

把DOM看作你的对象,那么你可以对你的对象做些什么?()

可以给她穿衣服,可以脱…..别乱想!是你穿而不是别人穿,这是属性;
也可以做一些你喜欢的事….呃,能做的事,这就是方法。

所以,我们要操练(作)的是 属性方法 ,不是你的女朋友!

HTML文档 - -

<html>
<head>
<meta charset=”utf-8”>
<title>这是一个文档<title>
</head>
<body>
<a href=”https://www.baidu.comtarget=”_blank”><img src=”file/xxx.xxx”></a>
<p>我是一段文本.</p>
</body>
</html>

上面是一个基本的HTML结构。包括以下

HTML标签 : 元素节点
链接地址: 属性节点
内容: 文本节点

所以,DOM操作,归根结底就是 - - 节点操作。

节点有关系!
这种关系是相对的!!
可以称之为 - - 关系链!!!(你可以是儿子,也可以是孙子,也可以是爸爸,同时可以是爷爷….特么的,让我想到前目的地了…)
谁被包含,谁就是儿子 , 儿子包含的自然就是孙子了….⊙﹏⊙!

关系链


//父子链 - -
parentNode  // 儿子找爸爸
firstChild  // 爸爸找老大(儿子)
lastChild   // 爸爸找老小(儿子)
//兄弟链 - -
nextSibling     // 老大找老小
previouSibling  // 老小找老大

总结为:特有的,始终存在的 - - 属性。


下面介绍4个方法:

document.getElementById       // 获取元素id
document.getElementsByTagName // 获取标签

getAttribute                  //  获取(查询)属性
setAttribute                  //  设置(改变)属性

这只是标准为我们设定的一些方法,当我们的水平牛x的时候,也可以自己编写一些牛x的方法。

上面,我们提到了,关系链 - - 属性,然后又说了4个常用的方法。

那么接下来,我们就可以,操(练)起这些属性和方法。

<script type="text/javascript">
    var obj = document.getElementById('div1'); //获取元素
    alert(obj.firstChild.nodeType); //弹出元素子元素的节点类型:Type
</script>
<div id="div1">
    <p>我是内容!</p>
</div>

上面是一个简单的DOM操作。在原生JS中,标准给我们提供了大量的方法和属性,供我们使用。在后面会进行详细的学习。

初识DOM(一)篇就写到这里!

写在最后,如有错误,欢迎指正!

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

理解Html DOM、Ext Element及Component

要学习及应用好Ext框架,需要理解Html DOM、Ext Element及Component三者的区别。   Ext是基于Web的富客户端框架,其完全是基于标准W3C技术构建设的,使用到的...

Extjs 理解Html DOM、 Element及Component

要学习及应用好Ext框架,需要理解Html DOM、Ext Element及Component三者的区别。   Ext是基于Web的富客户端框架,其完全是基于标准W3C技术构建设的,使用到的都是HT...

理解WebKit和Chromium: HTML解析和DOM

转载请注明原文地址:http://blog.csdn.net/milado_nju # HTML解析和DOM ## 概述 前面介绍了很多眼花缭乱的新技术,关于渲染,关于硬件加速,关于布局,关...

HTML DOM chm

  • 2016-07-15 14:46
  • 255KB
  • 下载

JavaScript HTML DOM - 改变 CSS

改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElementById(id).style.property=new style 例子 1 下面的例子...

html dom修改代码

html+dom+电子书

  • 2016-03-30 16:24
  • 776KB
  • 下载

Js中Dom对象,控制Html元素

题目是这样的:制作一个表格,显示班级的学生信息。 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行...

simple_html_dom

  • 2015-10-24 06:51
  • 351KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)