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(一)篇就写到这里!

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

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

js css html和DOM的关系和使用场景

html:作为网页的布局上的框架基础,用来编写网页的结构,即网页的组成元素和各元素之间层级关系。同时html中只有一系列已给定的类型作为基础构件,只能通过各元素的并置或叠套来组合各个元素。没有函数也不...
  • u014507230
  • u014507230
  • 2015年04月27日 15:07
  • 940

js之DOM操作(访问兄弟节点)

访问兄弟节点 1. nextSibling 属性可返回某个节点之后紧跟的节点(处于同一树层级中)。 语法: nodeObject.nextSibling 说明:如果无此节点,则该属性返回 nu...
  • u010359143
  • u010359143
  • 2015年09月21日 12:00
  • 5199

SAX解析,DOM解析以及XML HTML JSON之间区别

XML 定义  可扩展性标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自...
  • shangandeyu_kun
  • shangandeyu_kun
  • 2016年03月30日 08:07
  • 1856

Javascript:DOM 节点(新建HTML元素/删除HTML元素)

使用DOM可以新建HTML元素,也可以删除已有的HTML元素。
  • books1958
  • books1958
  • 2015年02月02日 14:29
  • 2318

Webkit之理解HTML解析和DOM树

## 概述 前面介绍了很多眼花缭乱的新技术,关于渲染,关于硬件加速,关于布局,关于其他很多,同大家一样,我也花了很多时间来消化它们。本章介绍稍微基础些的话题(本系列的写作顺序完全是随心所欲地),...
  • sauphy
  • sauphy
  • 2015年11月19日 01:34
  • 1135

【JavaScript】---DOM创建表格

什么是DOM? DOM:即文档对象模型           D:整个Web加载的网页文档           O:类似window对象之类的东西,可以调用属性和方法,可以理解为docum...
  • u013045959
  • u013045959
  • 2015年08月03日 16:17
  • 1426

XML DOM.HTML DOM和JS之间的关系

W3C所制订的DOM Level分为两大模块:Core和HTML。 1.Core核心,W3C规范:满足软件开发者和Web脚本编写者,访问和操控产品项目中包含的可解析的HTML和XML内容。 ...
  • qq_32468225
  • qq_32468225
  • 2016年12月13日 06:54
  • 577

JS中BOM和DOM的区别与联系

转载自:http://www.jb51.net/article/55851.htm Js组成 我们都知道, javascript 有三部分构成,ECMAScript,DOM和BOM,根据宿...
  • xiao_tommy
  • xiao_tommy
  • 2016年11月19日 15:56
  • 3772

JavaScript HTML DOM节点类型之Node类型介绍

JavaScript中所有HTML DOM节点类型都继承自Node类型,因此所有类型的节点都有一些相同的属性和方法。Node接口是DOM1级中定义的一个接口,在JavaScript中Node接口被实现...
  • bfboys
  • bfboys
  • 2017年01月11日 22:32
  • 1200

javascript 获取HTML DOM对象五种方式

获取DOM对象有5种方式: 1.document.getElementById('id');//返回结果是一个对象,如果存在两个标签拥有相同id,则返回第一个标签对象。 2.document.ge...
  • woniuguanjun
  • woniuguanjun
  • 2014年06月05日 23:40
  • 1819
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML DOM (一):DOM理解
举报原因:
原因补充:

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