JavaScript学习笔记--04

最新推荐文章于 2024-09-14 18:52:56 发布

lino_yao

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量163

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/lino_yao/article/details/51863912

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM（document object model）

DOM是“Document Object Model”（文档对象模型）的首字母缩写。DOM代表着被加载到浏览器窗口里的当前网页：浏览器提供了当前网页的地图（或者说是模型），可以通过JavaScript去读取这张地图。

JavaScript语言里的对象可以分为三种类型：

用户自定义（user-defined object）：由程序员自行创建的对象。
内建对象（native object）：内建在JavaScript语言里的对象，如Array、Math和Date等。
宿主对象（host object）：由浏览器提供对象。（最基础的是window对象）

PS：window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM（浏览器对象模型）——但笔者认为称之为Window Object Model（窗口对象类型）更为贴切。BOM向程序员提供了window.open和window.blur等方法。

DOM把一份文档表示为一棵树，更为具体地说，DOM把文档表示为一颗家谱树。

如下面的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>shopping list</title>
</head>
<body>
<h1>what to buy</h1>
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
<ul id="purchases">
    <li>A tin of beans</li>
    <li>Cheese</li>
    <li>Milk</li>
</ul>
</body>
</html>

以上代码的家谱树可以描述如下：

节点（node）表示网络中的一个连接点。网络是由节点构成的集合。

DOM的文档树是由节点构成的集合，只不过此时的节点是文档上的树枝和树叶而已。

元素节点（element node）如上述代码中的<body>、<p>和<ul>之类的元素。
文本节点（text node）如上述代码中<p>元素包含文本“Don't forget to buy this stuff.”，它是一个文本节点。
属性节点（attribute node）如上述代码中的title="a gentle reminder" 是一个属性节点。因为属性总是被放在其实标签里，所以属性节点总是被包含在元素节点当中。

PS：并非所有的元素都包含属性，但是所有的属性都会被包含在元素里。

getElementById() 方法：将返回一个与那个有着给定id属性值的元素节点对应的对象。

它将返回一个对象。可以用typeof操作符来验证这一点，typeof操作符可以告诉我们它的操作数是不是一个字符串、数值、函数、布尔值或对象。
<script type="text/javascript">
    alert(typeof document.getElementById("purchases"));
<script>

getElementByTagName() 方法：将返回一个对象数组。

getElementByTagName() 允许我们把一个通配符（星号字符*，必须放在引号里）当为它的参数，这意味着文档里的每个元素都将在这个函数返回的数组里占有一席之地。
var items=document.getElementsByTagName("li");
    for (var i=0;i<items.length;i++){
        alert(typeof items[i]);
    }
 alert(document.getElementsByTagName("*").length);

getAttribute() 方法：把它的各种属性的值查询出来。

getAttribute() 方法是一个函数。它只有一个参数——你打算查询的属性的名字：object.getAttribute(attribute)

getAttribute() 方法不能通过document对象调用，只能通过一个元素节点对象调用它。
var paras=document.getElementsByTagName("p");
for (var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("title"));
}
屏幕会出现显示着文本消息“a gentle reminder”的alert对话框。如果这份文档还有一个或者更多个不带title属性的<p>元素，则相应的getAttribute(title) 调用将会返回null。null是JavaScript语言中的空值，其含义是“你说的这个东西不存在”。

setAttribute() 方法：它允许我们对属性节点的值做出修改。

类似getAttribute() 方法，setAttribute() 方法也是一个只能通过元素节点对象调用的函数，但setAttribute() 方法需要我们向它传递两个参数：

object.setAttribute(attribute,value) 先把这个属性创建出来，然后再对其值进行设置。如果把setAttribute() 方法用在元素节点的某个现有属性上，这个属性的当前值就将被覆盖。

PS：通过setAttribute() 方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和、或行为发生相应的变化，但是通过浏览器的view source选项去查看文档的源代码时看到的人僵尸原来的属性值——也就是说，setAttribute() 方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再以动态方式对它们进行刷新，动态刷新不会影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终克服在他们的浏览器里执行页面刷新就可以实现。

总结：