DOM学习1

最新推荐文章于 2023-08-24 22:15:24 发布

qinxuan_1002

最新推荐文章于 2023-08-24 22:15:24 发布

阅读量282

点赞数

文章标签： DOM

本文链接：https://blog.csdn.net/qinxuan_1002/article/details/79367378

版权

DOM（document object model）翻译过来就是文档对象模型，既然说是模型，模型是某种现实事物的表现形式，就像一个建筑施工的模型，它就代表着某个建筑。而DOM代表的是加载到浏览器窗口的当前网页。换个角度理解就是，网页像是我们需要建设的建筑而DOM像是施工的图纸，我们可以通过修改DOM来调整网页。

DOM把一份文档表示为一棵树，并使用parent(父亲),child(儿子),sibling(兄弟)这些术语描述各个节点之间的关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>你好<a href="http://www.baidu.com.">Baidu</a></h2>
<p>这是段落</p>
<ul>                      
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>
</body>
</html>

这份文档可以用下面的图1表示

图1

上面图中html就是根，它有两个分支包括head元素和body元素，<head>元素有两个子元素:<meta>和<title>，这两个元素又互为兄弟关系。

在DOM中，DOM是由节点构成的集合，节点分为元素节点，文本节点和属性节点；

元素节点：标签的名字就是元素的名字，比如：文本段落的元素的名字是“P”，无序清单元素的名字是“ul”，列表项元素的名字是“li”。元素可以包含其他元素，事实上，有html元素没有包含在其他元素中，它是我们节点树的根节点。

文本节点：绝大多数的内容由文本提供，比如<p>元素包含文本“Hello World”,他就是一个文本节点，在html中文本节点总是被包含在元素节点内部，但不是所有的元素节点都包含有文本节点

属性节点：属性节点用来对元素做出更具体的描述，例如几乎所有的元素都有一个title属性，我们可以利用这个属性对包含在元素里的东西做出准确的描述。比如：<p title="hello">hello</p>.在DOM中，title=“hello”是一个属性节点

class和id：为了把某一个元素和其他元素区别开，我们通常使用class属性和id属性。

1、class属性

<p class="special">this paragraph has the special class</p>

<h2 class="special">this headline also has the special class<h2>在样式表里，可以像下面这样为class属性值相同的所有元素定义同一种样式

.special{

font-style: italic;

}

或者

h2.special{

font-style：italic;

}

2、id属性

id属性的用途是给网页里的某个元素加上一个独一无二的标识符，如下所示：

在样式表里，可以像这样为有特定的的id属性值元素定义一种独享的样式

#purchases{

border: 1px solid white;

}

DOM获取元素：有三种DOM方法可以获取元素节点，分别是通过元素ID、通过标签名字、通过类名字来获取

1、getElementById

document.getElementById(id),这个方法只有一个参数：就是你想获得那个元素的属性id值，但是这个id必须放在单引号或双引号里。比如：

document.getElementById("purchases")，这个调用将返回一个对象（Object），这个对象对应着document对象里的一个独一无二的元素，那个元素的HTML id属性值是purchase。

2、getElementByTagName

document.getElementByTagName(tag)这个方法只有一个参数，比如document.getElementByTagName("li"),这个方法返回的是一个对象数组，每个对象分别对应着文档有着给定标签的一个元素。

3、getElementByClassName

这个方法可以让我们通过class属性中的类名来访问元素

4、获取和设置属性getAttribute和setAttribute

通过getElenment的方法我们可以获得元素，但是我们得到元素之后，我们需要获得和设置元素的属性，然后就用到了我们的getAttribute和SetAttribute两个方法

object.getAttribute(attribute)，getAttribute方法不属于document对象，不能通过document对象调用，它只能通过元素节点对象调用如，它可以与getElementByTagName方法合用，获取<p>元素的title属性，如下所示：

var paras = document.getElementsByTagName("p");
for(var i=0;i<paras.length;i++) {
    alert(paras[i].getAttribute("title"));
}

5、setAttribute()是用来对属性节点做出修改的，它和getAttribute一样只能用于元素节点

object.setAttribute(attribute,value)

比如：

var shopping = document.getElementById("purchase");
shopping.setAttribute("title", "a list of goods");

qinxuan_1002

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM学习1

DOM（document object model）翻译过来就是文档对象模型，既然说是模型，模型是某种现实事物的表现形式，就像一个建筑施工的模型，它就代表着某个建筑。而DOM代表的是加载到浏览器窗口的当前网页。换个角度理解就是，网页像是我们需要建设的建筑而DOM像是施工的图纸，我们可以通过修改DOM来调整网页。DOM把一份文档表示为一棵树，并使用parent(父亲),child(儿子),sibli...
复制链接

扫一扫