bom + dom

BOM

BOM 是Browser Object Model的缩写，简称浏览器对象模型, 提供了独立于内容而与浏览器窗口进行交互的对象，用于访问浏览器的功能。BOM由一系列相关的对象构成，并且每个对象都提供了一些方法与属性. 我们可以通过这些属性和方法去对浏览器进行操作.
window对象是BOM的核心, window对象表示浏览器窗口的一个对象, 每个浏览器窗口都有一个window对象与之对应.
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的.

image.png

document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)
history(重要): 历史对象,包含窗口的浏览历史，可以实现后退
location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面
frames: 框架对象，可以获取页面框架内容
screen: 包含有关客户端显示屏幕的信息
navigator: 导航对象, 包含所有有关访问者浏览器的信息
window对象的方法:

alert(text): 弹出提示框(警告框)
confirm(): 创建一个需要用户确认的对话框
prompt(text,defaultInput) : 创建一个对话框要求用户输入信息
open(url,name,[options]) : 打开一个新窗口并返回新 window 对象
setInterval(): 设置定时器
clearInterval() : 移除定时器
setTimeOut() : 设置延时器
clearTimeOut(): 移除延时器
close(): 关闭窗口
print(): 调出打印对话框

window对象的属性和方法的调用方式，可以使用 window.属性、window.方法()或者一般可以直接使用: 属性、方法()的方式调用。window.alert() 和 alert()效果是一样的
window.open()

window.open(): 打开指定的网址url.  一般可以接受三个参数: 
 (1. 要加载的URL   2. 窗口的名称 或者 窗口的目标  3. 一个特性的字符串)
open(“http://www.baidu.com”);              //新建页面并打开百度
open(“http://www.baidu.com”, “baidu”);       //新建页面并打开百度,窗口命名为baidu
open(“http://www.baidu.com”, “_parent”);    //在本页窗口打开, _blank是新建(默认)
注: 不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。
第三个字符串参数: 
width/height:  新窗口的宽度和高度, top/left: 新窗口的Y坐标和X坐标 
open(‘http://www.baidu.com’, ‘baidu’,‘width=400,height=400,top=200,left=200’ );
opener: 父窗口对象
document.onclick = function(){
     opener.document.write("调用父窗口对象输出!");
}

父与子窗口互相发送信息

<body>
    <input id="txt">
    <button id="openPage">打开子窗口</button>
    <button id="send">向子窗口发送数据</button>
    <script>
        var oTxt = document.getElementById("txt");
        var oOpenPage = document.getElementById("openPage");
        var oSend = document.getElementById("send");
        var winHandler;//子窗口的句柄
        oOpenPage.onclick = function () {
            winHandler = window.open("./3.child.html", "子窗口", "width=500,height=500,left=400")
        }
        //发送数据
        oSend.onclick = function () {
            //拿输入框的数据
            var str = oTxt.value;
            //发送
            winHandler.document.getElementById("child_txt").value = str;
        }
    </script>
</body>

<body>
    <input id="child_txt">
    <button id="send">回数据给 父窗口</button>
    <script>
        var oChildTxt = document.getElementById("child_txt");
        var oChildSend = document.getElementById("send");
        oChildSend.onclick = function () {
            //如何得到父窗口对象
            //自己输入的内容,赋值到父窗口的输入框
            window.opener.document.getElementById("txt").value
            = oChildTxt.value;
        }
    </script>
</body>

location对象

location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息, 还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性; 所以window.location和document.location等效。


image.png

image.png
location的方法 (大部分 跳转)
             location="https://www.baidu.com"
             location.href="https://www.qq.com"
            跳转后,没有历史记录
             location.replace("https://www.sina.com")
             location.assign("http://www.douyu.com")
            刷新页面
             location.reload()
             location.reload(true)//强制刷新
            content 3秒刷新一次
             <meta http-equiv="refresh" content="3"/>

history对象

history对象是window对象的属性，它保存着用户上网的记录,从窗口被打开的那一刻算起.

history对象的属性
history.length; //history对象中的记录数
history对象的方法
history.back();     //前往浏览器历史条目前一个URL, 类似后退
history.forward();  //前往浏览器历史条目下一个URL, 类似前进
history.go(-1); //浏览器在history对象中向前或向后(-1代表后退, 1代表向前,0表示刷新当前页面)

navigator对象(了解)
navigator对象是window对象的属性，它保存了浏览器的信息, 如: 浏览器名称,版本,浏览器所在的电脑操作系统等。

navigator对象的属性
console.log(navigator.appName);  //浏览器名称
console.log(navigator.appVersion);  //浏览器版本
console.log(navigator.platform);  //操作系统
//最新的浏览器已经全面放弃以上这些属性
navigator对象的属性
console.log(navigator.userAgent);  //用户代理信息, 通过该属性可以获取浏览器及操作系统信息

DOM

DOM就是Document Object Model(文档对象模型)的缩写，DOM 是 W3C（万维网联盟）的标准。
DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
DOM节点分为三种: 元素节点, 属性节点和文本节点
例如: <div title= "属性节点" >测试Div</div>
<div></div>: 元素节点(最重要)
title="属性节点": 属性节点
测试Div : 文本节点
元素节点对象的获取方式:

getElementById():  获取特定ID元素的节点对象(返回一个对象)
getElementsByTagName():  获取指定标签名的节点列表(返回一个数组)
getElementsByName():  获取相同name属性值的节点列表(返回一个数组)

getElementById()
getElementById()需要给一个参数: 元素节点的id属性值。如果找到相应的元素则返回该元素的元素节点对象，如果不存在，则返回 null。
例如: 获取 id 为 box 的元素节点 var box = document.getElementById('box');
注意: 如果id值存在, 但是返回null，则是执行顺序的问题
解决方法:

  1. 把<script>标签(JS代码)移到html结构后面；
  2. 使用onload事件来处理， onload事件会在html加载完毕后再调用。
    //加载 html 后执行
 window.onload=function() {      
       document.getElementById('box');  //id具有唯一性
 };

元素节点的属性

tagName: 元素节点对象所指向的标签名称
id: 元素节点的id属性值
innerHTML: 元素节点中的内容
className: 元素节点的class属性值
style: css内联样式对象
title:  元素节点的title属性值
例如: 
document.getElementById(‘box’).id;    //获取 id 
document.getElementById(‘box’).id = ‘person’;   //设置id
document.getElementById(‘box’).style;   //获取css样式对象 document.getElementById(‘box’).style.color;    //获取 style 对象中 color 的值
document.getElementById(‘box’).style.color=‘red’;  //设置 style 对象中 color 的值
document.getElementById(‘box’).className;   //获取 class
document.getElementById(‘box’).className=‘box’;   //设置 class

getElementsByTagName()
getElementsByTagName()方法将返回一个数组HTMLCollection(NodeList)，这个数组保存着所有相同标签名的节点列表。

document.getElementsByTagName(‘li’);  获取所有li元素，返回数组 
document.getElementsByTagName(‘li’).length; 获取所有li元素的数量
document.getElementsByTagName(‘li’)[0];  获取第一个li元素
document.getElementsByTagName(‘li’).item(0); 获取第一个li元素

getElementsByName()
getElementsByName()方法可以获取相同名称(name)的元素，返回一个数组 HTMLCollection(NodeList)。

document.getElementsByName(‘box’); 获取 input 元素 
document.getElementsByName(‘box’)[0].value; 获取 input 元素的 value 值

getElementsByClassName(): 通过class名称获取元素节点对象(IE9+以上)
获取子元素节点
我们获取元素节点不一定必须使用document.来调用getElementsByTagName()或getElementByName(); 在某些情况下, 我们需要获取指定范围内的子元素节点.

<div id="box">
      <img src="images/1.jpg">
      <img src="images/2.jpg">
      <img src="images/3.jpg">
</div>
<img id="showImg" src="images/4.jpg" />
//通过oBox元素节点, 获取其三个子元素节点img
var oBox = document.getElementById("box");
var aImg = oBox.getElementsByTagName("img");

DOM节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个共有的属性，分别为：nodeName、nodeType 和 nodeValue


image.png

childNodes: 某元素的所有子节点，这些子节点包含元素节点和文本节点。

    var box = document.getElementById(‘box’);  获取元素节点对象
    console.log(box.childNodes.length);  获取这个元素节点的所有子节点
    console.log(box.childNodes[0]);  获取第一个子节点对象

children: 某元素的所有子元素节点
忽略空白文本节点
在非IE中, 标准的DOM具有识别空白文本节点的功能，而 IE自动忽略了, 如果要保持一致的子元素节点, 需要手工忽略掉它.

//忽略nodes数组中的空白节点
function filterSpaceNode(nodes){ 
      for(var i=0; i<nodes.length; i++) { 
            //如果是文本节点, 且文本节点的内容为一个或多个空格
            if ( nodes[i].nodeType==3 && /^\s+$/.test(nodes[i].nodeValue) ){ 
                  nodes[i].parentNode.removeChild(nodes[i]);  //找到空白文本节点后, 将其删除     
            }
      } 
      return nodes; 
}
注意: /^\s+$/表示一个或多个空格

innerHTML和nodeValue的区别
1, 取值的区别
nodeValue 可以获取文本节点的内容和属性节点的值。
innerHTML只能获取元素节点中的内容。
2, 赋值的区别
nodeValue 会把包含在文本里的HTML标签按原样输出。
innerHTML 可以解析内部的HTML标签

文本节点使用nodeValue,结果为：<strong>abc</strong> 
box.childNodes[0].nodeValue='<strong>abc</strong>';
元素节点使用innerHTML,结果为：abc(加粗的)
box.innerHTML='<strong>abc</strong>';
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • js简介
    JavaScript语言介绍 诞生 JavaScript 诞生于 1995 年。由Netscape(网景公司（火狐...
    sskingfly阅读 785评论 0赞 0
  • html,css,js全阶段试题分析
    1.行级元素有哪些？块级元素有哪些？行级元素如何转换成块级元素？ block元素的特点： 1.总在新行开始，2.高...
    我的天气很好啦阅读 1,541评论 2赞 9
  • 第二阶段第四周第13章事件
    1、事件流 1.1事件冒泡 IE的事件流叫做事件冒泡，即事件开始时由嘴具体的元素接收，然后逐级向上传播到较为不具体...
    阿超超超超阅读 258评论 0赞 0
  • 第三阶段-js
    一、javascript的简介 1.基于对象和事件驱动的语言,应用与客户端 a.基于对象： 提供好了很多对象,可以...
    有一束阳光叫温暖阅读 549评论 0赞 1
  • 表情管理
    表情是什么，我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了，难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 126,124评论 2赞 7