BOM对象

Window

window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
在全局作用域中定义的任何对象都是window的属性

        function fun() {
            console.log('hello');
        }
        var num = 123;
        console.log(window.num);
        window.fun();
        fun();    //与window效果一样

//三种框以及window
        alert('hello');       //警示框
        window.alert('world');//警示框
        confirm('hello world'); //确定框
        var ret = prompt('请输入内容：');//输出框
        console.log(ret);

//打开一个网址，跳转过去
window.open('https://www.baidu.com','_self');
window.location = 'https://www.baidu.com';

function fun2() {
     console.log('hello');
      //关闭当前窗口（浏览器中的一个选项卡）
     window.close();
}
setTimeout(fun2,3000);

location

/*
location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是window对象的属性，也是document对象的属性。 
*/
//打开一个网址，跳转过去
location.href = "https://www.baidu.com";
replace:也相当于跳转
location.replace("https://www.baidu.com");
//重新加载页面
location.reload();//从本地缓存中加载
location.reload(true);//从服务器重新获取加载
//location对象其他属性也可改变URL：
location.hash;  //url中以#号开头的字符串（锚点）
location.search;//url中以?开头的字符串（参数）
location.host;//服务器名称和端口号
location.hostname;//服务器名称
location.pathname;//返回URL中的目录和（或）文件名。
location.port;//返回URL中指定的端口号，如果没有，返回空字符串
location.protocol;//返回页面使用的协议

history

//history对象
//原本是用来存储历史记录的，但出于隐私问题，就禁止了
//现在基本就是用来做网页的“前进和后退”功能
history.forward();//前进
history.back();//后退
history.go(n); //n>0表示前进n次，n<0表示后退n次

screen

//screen对象
//用来获取电脑屏幕相关信息，比如分辨率
screen.width;screen.height;//分辨率

navigation

//navigator对象
//存储浏览器的相关信息
navigator.userAgent;//用来识别浏览器名称、版本、引擎 以及操作系统等信息的内容

DOM（Document Object Model）文档对象模型 DOM描绘了一个层次化的树形结构，允许开发人员添加、移除和修改页面的某一部分树形结构中的节点称为DOM节点，这里的节点并不是指标签，它有很多类型，共12种。
每一个节点都有一个childNodes属性，其中保存着一个NodeList对象，它是一个类数组对象。在这个对象中保存这所有的子节点，通过length得到子节点的个数。NodeList对象是动态的，实时保持最新的数据.

//访问节点的子节点
var firstChild   = someNode.childNodes[0];
var secondChild  = someNode.childNodes.item(1);
var childCount   = someNode.childNodes.length;

DOM元素节点的相关操作

查找节点的方法

//getElementById()
//getElementsByName()
//getElementsByTagName()
//getElementsByClassName()
//querySelector()
//querySelectorAll()

创建按钮

    var btn = document.createElement('input');//创建一个按钮
    btn.type = "button";
    btn.value = "按钮";
    document.body.appendChild(btn)

getElementById 按id查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1>hello world</h1>
<div id="dd" class="class_dd" name="name_dd">
    <p class="pp" id="p2">我是谁</p>
    <p class="pp">从哪里来</p>
</div>
<div id="dd2">
    <span class="pp">我是谁</span><br>
    <img src="1.jpg" alt="">
</div>
</body>
<script type="text/javascript">
    var p2 = document.getElementById('p2');  //查找HTML中id为p2的标签
    // p2.innerText = '你是谁';    //将p2的内容改为‘你是谁’
</script>
</html>

JavaScript BOM对象 DOM对象

BOM对象

查找节点的方法

猜你喜欢