BOM与DOM的定义与方法

Bom

浏览器对象模型

console.log(window);
全局变量，全局函数

系统对话框

alert()

在当前页面上弹出警告框，并且显示内容

confirm()

功能：弹出一个带确定和取消按钮的提示框
返回值：点击确定返回true
点击取消返回false

prompt

功能：弹出一个带输入框的提示框
参数：
第一个参数：提示面板上的内容；
第二个参数：输入框上默认的值

返回值：
点击确定：返回输入的内容
点击取消：返回null

open方法

• 第一个参数：url 每调用一次打开一个新窗口，加载这个url
• 第二个参数：字符串，给打开的窗口起个名字
• 第三个参数：一串特殊函数的字符串

history

history 只能存储当前窗口的历史记录
【注】产生历史记录的，方式只要两次url不同，就产生新的记录。

history.length 当前窗口的历史记录条数

    history.back() 返回上一条记录
    history.forward() 前进到下一条记录
    history.go()
    0 刷新当前页面
    正整数 前进对应数字条记录
    负整数 后退对应数字条记录

location对象

location.assign(url) 跳转到这个url
    location.reload()    刷新当前页面
    location.reload(true)强制重载，不经过缓存，重新下载
    location.replace()   替换成这个url，不会产生历史。

location 地址栏
        地址栏里面存储的是：
        url  统一资源定位符。

        中文版：协议://主机名:端口号/路径/?查询字符串#锚点
        英文版：protocol://hostname:port/pathname/?search#hash

协议：http https file ftp


        主机名：
        127.0.0.1:
        61.135.169.121
        www.baidu.com/  域名，给IP起一别名  DNS

    IP：任何一个网络在全世界的唯一编号
         ipv4：4组0-255的数。 2进制32位数表示IP
         ipv6 4组16进制数表示 2进制64位数表示IP

    端口号：当前电脑上，使用网络的程序，分配的一个编号
                    0~65535

DOM

文档对象模型

通过js操作dom，必须在js中获取到html节点。
DOM操作：使用js操作页面上的html和css。

DOM节点类型

    元素节点  <div></div>
    属性节点 id = 'div1' title = 'hello'
    文本节点  div文本

获取节点的方式

window.onload = function(){}

 通过id名
    【注】通过id获取对应的元素节点

    var oDiv = document.getElementById('div1');
    console.log(oDiv);
    

通过标签名
    【注】可以从node节点的子节点中，找到标签名符合条件所有节点。
    .node子节点中找符合条件
    返回值：类似于数组的对象，叫做伪数组。
    
    var ali = document.getElementsByTagName('li');
    console.log(ali);
    取里面的值
    for(var i = 0; i< ali.length; i++){
        console.log(ali[i].innerHTML)
    }

通过class名
    【注】在document上获取name符合条件的元素。
    .node子节点中找符合条件（ie8下不兼容）

    var nodes = document.getElementsByClassName('box');
    console.log(nodes);
    
    var oul = document.getElementById('ul1');
    var nodes = oul.getElementsByClassName('box');
    console.log(nodes);
    
    

node.getElementsByClassName(className);
    【注】可以从node节点的子节点中，找到className符合条件的所有节点。

 document.querySelector()
    返回值：只返回符合条件的第一个节点
    
document.querySelectorAll()
    返回值：返回数组，就算只有一个节点，也是放在数组中返回。
    参数：都是字符串，CSS选择器样式的字符串。
    
    var oul = document.getElementById('ul1');
    var nodes = document.querySelectorAll('ul li');
    console.log(nodes);

修改节点里的内容

var node = document.getElementById("div1");
        console.log(node);
        console.log(node.id);
        console.log(node.className);
        修改：
        node.id = 'div2';
        node.title = 'world';
        node.className = 'box4';
        console.log(node.style.width);
        node.style.width = '300px';
        node.style.backgroundColor = 'blue';
        console.log(node.style.backgroundColor);

元素节点的属性

oDiv.id
oDiv.title
oDiv.className
	访问class 必须写成className
oDiv.style.width
oDiv.style.backgroundColor
	遇到中间带-的css样式，-去掉，从第二个单词开始首字母大写。
innerHTML  标签间内容
innerText  标签间纯文本(不带标签) 
outerHTML 整个标签
tagName   返回当前元素节点的标签名(大写)
只能获取内联的css样式。
	//获取当前有效样式浏览器兼容的写法

innerText innerHTML outerHTML

 window.onload = function(){
            var node = document.getElementById('div1');
             console.log(node);
             console.log(node.tagName);
             解析：标签及内容
             console.log(node.innerHTML);
             node.innerHTML = "<h1>hello world</h1>";
            解析全部
             console.log(node.outerHTML);
             node.outerHTML = "<h1>hello world</h1>";
            解析纯文本
            console.log(node.innerText);
            node.innerText = "<h1>hello world</h1>";
        

        }