web前端基础部分（四） BOM和DOM

最新推荐文章于 2024-03-08 08:40:40 发布

zzh666999

最新推荐文章于 2024-03-08 08:40:40 发布

阅读量319

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/zzh666999/article/details/45276503

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、BOM

1、BOM简介

BOM：Brower Object Model 浏览器对象模型

作用:

a、提供独立于内容且与浏览器交互的对象

b、有一系列对象组成，提供访问、修改控制浏览器的属性和方法。

注：没有统一标准

2、BOM对象

a、Window 顶级对象,表示在浏览器打开的窗口。

如果文档包含框架（frame或iframe）浏览器会为html文档创建一个window对象，并为每个框架创建一个格外的window对象

常用方法 window.open

window.close

window.alert

Boolean window.confirm(String)

String window.prompt(String)

setInterval和setTimeout方法注：setTimeout()只执行code一次。想要多次就采用递归的思想

b、History 包含用户访问过的url

常用方法：back() 加载history列表前一个url

forword() 加载history刘表下一个url

go() 加载history具体页面

c、Location 包含当前url信息

二、DOM

1、DOM简介

DOM:文档对象模型一套用于访问XML和HTML的标准，允许脚本通过DOM动态访问和更新文档的内容、结构和样式

分类：DOM Core

XML DOM 定义了访问和处理XML文档的标准和方法

HTML DOM 符合XML语法标准，所以可以使用XML DOM API. 定义了针对html的对象，是更适合开发JavaScript的api

XML DOM的每一个元素都会被解析为一个节点Node，

常用节点：元素节点 Element

属性节点 Attr

文档节点 Text

注：节点的特性和方法有很多，建议真心学习DOM的朋友查一查帮助文档（对个人发展是有必要的）。

个人理解：DOM是一种标准，我把它理解为JAVA的接口，

既：                           |   java
                    |                 |   html
          文档 |   DOM     |    c#
                    |                 |   xml
                                    |   c++

2、Document对象

常用方法：getElementById() 返回对拥有指定ID的第一个对象的引用

getElementByName() 返回带有指定名称的对相集合

getElementByTagName() 返回带有指定标签名的对相集合

3、常用属性

a、nodeName

b、nodeType

c、nodeValue

练习：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">

</script>
<script type="text/javascript">
<!--
    function $(id){
  return document.getElementById(id);
}
//添加数据
function addData(){
  var n=$("n1").value;
  var e=$("e1").value;
  var a=$("a1").value;

  var ta=$("ta");
  var add="<tr align='center'><td>"+n+"</td><td>"+e+"</td><td>"+a+"</td><td><button οnclick='del(tis)'>删除</button></td></tr>";
  ta.innerHTML+=add;
}
//删除数据
function del(obj){
  obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
//-->
</script>
</head>
<body>
   <br/>
   <br/>
   <br/>
   <div align="center" id="dv">
     姓名：
<input name="name1" id="n1"/>
Email:
<input name="email1" id="e1"/>
年龄：
<input name="age1" id="a1"/><br/>
<p align="center">
  <button name="button1" id="b1" οnclick="addData()">添加数据</button>
</p>
<hr/><br/>
<table id="ta" border="1" cellspacing="0" cellpadding="5">
  <tr align="center">
      <td id="name2">姓名</td>
   <td id="email2">Email</td>
   <td id="age2">年龄</td>
   <td>操作</td>
  </tr>

  <tr align="center">
   <td>逍遥</td>
   <td>123456@qq.com</td>
   <td>24</td>
   <td><button οnclick="del(this)">删除</button></td>
  </tr>
</table>
   </div>
</body>
</html>

zzh666999

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端基础部分（四） BOM和DOM

一、BOM1、BOM简介BOM：Brower Object Model 浏览器对象模型作用:a、提供独立于内容且与浏览器交互的对象b、有一系列对象组成，提供访问、修改控制浏览器的属性和方法。注：没有统一标准2、BOM对象a、Window 顶级对象,表示在浏览器打开的窗口。如果文档包含框架（frame或iframe）浏览器会为html文档创建一个window对象，并
复制链接

扫一扫