浅谈BOM和DOM

最新推荐文章于 2024-04-26 20:48:04 发布

卡夫卡的熊kfk

最新推荐文章于 2024-04-26 20:48:04 发布

阅读量445

点赞数

分类专栏： ——【B/S】

本文链接：https://blog.csdn.net/qsbbl/article/details/78725216

版权

——【B/S】专栏收录该内容

14 篇文章 2 订阅

订阅专栏

我们知道，JS由三部分组成：

其中ECMAScript是一种脚本程序设计语言，往往被称为“javascript”。

————————————————————————————————————

[DOM]

DOM，Document Object Model，文档对象模型。描述了处理网页内容的方法和接口。

DOM以一种树形结构表示HTML文档。其中，结点=元素。

下面我们使用DOM对元素进行操作。

获取

解释：获取HTML文档的一个特定元素并且返回一个对它的引用。

举个通过ID获取元素的栗子：

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
     <title>Get By Id</title>
     <script type="text/javascript">
      function checkhref(){
      	var a1=document.getElementById("w");
      	alert(al.href);
      }
     </script>
</head>
	
<body οnlοad="checkhref();">
<p>内容</p>
<p>link to the <a id="w" href="www.baidu.com">w</a></p>
</body>
</html>

执行结果为：

代码解析：

（1）用getElementById（）方法获取到了id=“w”的元素<a>。

（2）访问了它的属性

还有一个通过标签名来获取的方法getElementsByTagName（），使用方法类似，不再赘述。

两者的区别：前者适合于单个元素的获取，后者适合于多个元素，小编认为，其的区别类似于CSS中id和class的区别。

操作

在JS中，我们可以用getAttribute（）方法和setAttribute（）方法来获取和设置属性。

vara1=document.getElementById("w");
alert(a1.getAttribute("href"))；

下面举个用jquery代码来获取和修改属性的栗子，其中用了attr（）函数。

<!doctype html>
<html>
<head>
    <title>Set Attrib</title>
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<a href="http://www.braingia.org" id="braingialink">Steve Suehring's Web
Site</a>
<script type="text/javascript">
    alert($("#braingialink").attr("href"));
    $("#braingialink").attr("href","http://www.microsoft.com");
    alert($("#braingialink").attr("href"));
</script>
</body>
</html>

创建

下面举一个添加元素<p>并设置其ID的栗子：

<!doctype html>
<html>
<head>
    <title>Create</title>

</head>
<body>
    <script type="text/javascript">
    var newelement = document.createElement("p");
    document.body.appendChild(newelement);
    newelement.appendChild(document.createTextNode("Hello World"));
    </script>
</body>
</html>

运行结果为：

代码解析：

（1）通过createElement（）方法为文档创建一个新元素<p>

（2）setAttribute的作用是为新元素添加了一个id属性。

（3）appendChild（）方法用于将这个新元素添加到文档中

（4）createTextNode（）方法起到的是“以防万一”的作用，如果<p>元素中没有文本，就会显示其内的内容，比如在这个小栗子中，显示的便是“Hello World”

值得一提的是，这只是在js中为元素添加id属性，在jQuery中使用attr（）函数即可。

删除

语法为：

document.body.removeChild();

————————————————————————————————

[BOM]

BOM，Browser Object Model，浏览器对象模型。描述了与浏览器进行交互的方法和接口

windows对象孩子的作用为：

对象名	作用	备注
Self	返回对窗口自身的只读引用
Document	对页面内所有HTML元素的访问
Navigator	检测访问者浏览器和环境的各种元素，比如正在使用哪个浏览器
Screen	获取屏幕信息，如获取屏幕的高度
forms	表单
history	提供了通过访问者浏览历史向前和向后移动的方法
location	使我们能够访问当前载入的URI

———————————————————————————————————————

[两者区别]

bom是浏览器对象模型，用来获取或设置浏览器的属性、行为。例如：新建窗口、获取屏幕分辨率、浏览器版本号等

dom是文档对象模型，用来获取或设置文档中标签的属性，例如获取或者设置input表单的value值

卡夫卡的熊kfk

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
6
评论
浅谈BOM和DOM

我们知道，JS由三部分组成：其中ECMAScript是一种脚本程序设计语言，往往被称为“javascript”。———————————————————————————————————— [DOM]DOM，Document Object Model，文档对象模型。描述了
复制链接

扫一扫