关闭

HTML DOM (一):DOM理解

标签: domjs
97人阅读 评论(0) 收藏 举报
分类:

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:572次
    • 积分:28
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档