初步了解DOM与BOM

DOM:

  HTML DOM(Docuiment Object Model)是MHTL文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器、平台语言无关的接口,使得用户可以访问页面上其他的标准组件。DOM与JavaScript结合ilai实现了Web网页的行为与结构的分离。

    DOM 是 W3C(万维网联盟)的标准。

    DOM 定义了访问 HTML 和 XML 文档的标准:

    W3C DOM 标准被分为 3 个不同的部分:

      •     核心 DOM - 针对任何结构化文档的标准模型
      •     XML DOM - 针对 XML 文档的标准模型
      •     HTML DOM - 针对 HTML 文档的标准模型

DOM的起源:

  从DOM Level 1开始,DOM API 包含了一些接口,用于表示可从 XML 文档中找到的所有不同类型的信息。它还包含使用这些对象所必需的方法和属性。Level 1包括对XML 1.0和HTML的支持,每个 HTML 元素被表示为一个接口。它包括用于添加、编辑、移动和读取节点中包含的信息的方法,等等。然而,它没有包括对 XML 名称空间(XML Namespace)的支持,XML 名称空间提供分割文档中的信息的能力。DOM Level 2添加了名称空间支持。Level 2扩展了 Level 1,允许开发人员检测和使用可能适用于某个节点的名称空间信息。Level 2还增加了几个新的模块,以支持级联样式表、事件和增强的树操作。当前正处于定稿阶段的 DOM Level 3包括对创建 Document 对象(以前的版本将这个任务留给实现,使得创建通用应用程序很困难)的更好支持、增强的名称空间支持,以及用来处理文档加载和保存、验证以及 XPath 的新模块;XPath 是在XSL 转换(XSL Transformation)以及其他 XML 技术中用来选择节点的手段。DOM 的模块化意味着作为开发人员,您必须知道自己希望使用的特性是否受正在使用的 DOM 实现所支持。

DOM的应用:

创建、插入和删除DOM元素(this的使用)
创建:createElement() ,之后添加 oUl.appendChild(oLi); 格式:父级.appendChild(子节点);
插入:父级.appendChild(子节点) ,父级.insertBefore(子节点,在谁之前插入)
IE 有兼容性问题 ,联合两个插入方法用if判断解决
删除:removeChild(),


·文档碎片
创建文档碎片:createDocumentFragment();


DOM操作应用(高级)
·表格应用
<thead>表头, <tbody>表格的内容,便捷操作:
getElementsByTagName('tbody')[0] = tBodies[0]
getElementsByTagName('tr')[0] = rows[0]
getElementsByTagName('td')[0] = cells[0]
tBodies是数组 、一个表格只能有一个表头tHead表尾tFoot


·表格搜索: 
忽略大小写搜索:toLowerCase() :转成全小写的形式
模糊搜索:search(),找到就返回字符串出现的位置,没找到返回-1
关键字搜索:split()
筛选:先让所有的display为none隐藏起来,符合条件display就变成block显示出来


·表格排序
appendChild()的使用:1.先把元素从原有的父级上删掉 2.添加到新的父级
sort()的使用(数组排序)
---------------------
作者:weihongda666
来源:CSDN
(转载:https://blog.csdn.net/weihongda666/article/details/79016467  ;相关搜索:https://www.cnblogs.com/allan-king/p/5799144.html)

DOM的Method(部分):

1.通过getElementById()方法访问节点

  document对象的getElementById()方法可以访问页面中的节点,该方法在使用时,必须指定一个目标一个元素的id作为参数。

  基本语法:

  例:var s=document.getElementById(id);  //调用时参数需要加双引号

2.通过getElementsByName()方法访问节点

   通过元素名字来进行访问。

   基本语法:

   例:var s=document.getElementsByName(name);  //调用时参数需要加双引号

3.通过getElementsByTagName()方法访问节点

   通过标记名称来获取页面上所有同类的元素。

   基本语法:

   例:var s=document.getElementsByName(tagname);  

4.通过form元素方法访问节点

   如果要获得页面上中的form对象,除了getElementById()方法访问、getElementsByName()方法访问,还可以通过document对象的forms属性来获得这个form对象。

   基本语法:

   例:

   var myfrm=document.forms;    //6通过document的forms属性对象获得数组对象

   var mloginform=myfrm[0];             //获得数组中的第一个form对象

其他方法:getElementsByClassName()   返回包含带有指定类名的所有元素的节点列表。  appendChild()   把新的子节点添加到指定节点。 removeChild()   删除子节点。  replaceChild()  替换子节点。  insertBefore()  在指定的子节点前面插入新的子节点。

      createAttribute()  创建属性节点。  createTextNode()  创建文本节点。getAttribute()  返回指定的属性值。  setAttribute()  把指定属性设置或修改为指定的值。

【在DOM中还有两个很重要的属性,分别是innerText和innerHTML】

  innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

  innerText 打印标签之间的纯文本信息,会将标签过滤掉。

BOM:

BOM的介绍:

     broswer object model(浏览器对象模型),由五个对象组成:  Window:对象表示浏览器中打开的窗口 最顶层对象. Navigator :浏览器对象.Screen: 屏幕对象 ,History:浏览器历史对象,Location:地址对象.

 

   BOM(Browser Object MOdel)也称为浏览器对象模型。浏览器对象模型定义了JavaScript可以进行操作的浏览器的各个功能不能部件(如窗口本身、屏幕功能部件、浏览历史记录等)的途径以及操作方法。

BOM的应用:

    

    BOM,Bowser Object Model浏览器对象模型。提供了访问和操作浏览器各组件的途径或方法。

    比如:Navigator对象:浏览器的名称、版本号、客户端操作系统、系统语言等

    Window:弹出一个广告窗口、窗口的尺寸;

    History:获取到你浏览器的历史记录;

BOM的方法:

  Closed:判断一个窗口是否关闭;

  Name:获取当前窗口的名称;

  innerWidth:指窗口的净宽,不含:菜单栏、地址栏、状态栏、工具栏;

  在IE中不支持  IE中可以使用body元素的clientWidth和clientHeight来代替。

  innerHeight:指窗口的净高,不含:菜单栏、地址栏、状态栏等;IE中不支持

  outerWidth:指窗口的总宽度,包含:菜单栏、地址栏、状态栏等。IE不支持

  outerHeight:指窗口的总高度,同上。IE不支持

  window对象的方法 :

  Window.alert(str):弹出一个警告对话框;

  Window.prompt():弹出一个输入对话框

  Window.confirm():弹出一个确认对话框

  Window.close():关闭窗口

  Window.print():打印窗口中的网页

    【所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至 HTML DOM 的 document 也是 window 对象的属性之一

  

  location对象方法:

location对象是一个很特别的对象,因为它既是window对象的属性,也是document对象的属性。(转自:https://blog.csdn.net/CC25802580/article/details/80727073)

window.location和document.location引用的是同一个对象。 

location对象的属性:

Navigation对象方法:(转自:https://www.cnblogs.com/fengmingyue/p/5946116.html

history对象
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。因为history是window对象的属性,因此每个浏览器窗口、每个标签页以及每个框架,都有自己的history对象与特定的window对象关联。处于安全方面的考虑,开发人员是无法知道用户浏览过的URL,不过,借助用户访问过的页面列表,同样可以在不知道实际URL的情况下实现后退和前进。

使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。该方法接收一个参数:表示向前或者向后跳转的页面数的整数值。负数表示向后跳转(类似单击浏览器的后退按钮),正数表示向前跳转(类似浏览器的前进按钮)。

//后退一页
history.go(-1);
//前进一页
history.go(1);

(转自:https://blog.csdn.net/CC25802580/article/details/80727073 )

原文地址:https://www.cnblogs.com/dxz1/p/9838108.html