BOM&DOM

1.BOM

1.1window对象

window对象是BOM的顶层(核心)对象，所有对象都称为window的子对象
DOM是BOM的一部分。

window对象：
1.window独享是js中的顶级对象。
2.全局变量，自定义函数也是window对象的属性和方法。
3.window对象下的属性和方法调用时，可以省略window。

1.2弹出系统对话框

alert();    //不同浏览器中的外观是不一样的
confirm();  //兼容不好
prompt();   //不推荐使用

1.3定时器-延时执行

1.4定时器-周期任务

1.5location

1.5.1location属性简介

window.location可以简写为location。location相当于浏览器地址栏，可以将url解析成独立的片段。

location对象的属性
href：跳转
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议 一般是http、https
search 查询字符串

1.5.2location应用：获取url中查询字符串

1.6navigator

1.6.1navigator方法简介

window.navigator 的一些属性可以获取客户端的一些信息。

userAgent：系统，浏览器
platform：浏览器支持的系统，win/mac/linux

console.log(navigator.userAgent);
console.log(navigator.platform);

1.6.2navigator应用

1.7history对象

history对象
1、后退：
history.back()
history.go(-1)：0是刷新

2、前进：
history.forward()
history.go(1)

用的不多。因为浏览器中已经自带了这些功能的按钮：

2.DOM

2.1DOM介绍

"概念"
所谓DOM，全称Document Object  Model，文档对象模型。
在文档中一切皆是对象，比如html,body,div,p都看做是对象。

"解析过程"
HTML加载完毕，渲染引擎会在内存中把HTML文档生成一个DOM树。

2.2DOM树(一切皆是节点)

在HTML中，一切都是节点。
"元素节点"：HTML的标签，如div,p,span
"文本节点"：标签中的文字（比如标签之间的空格、换行）
"属性节点"：标签的属性，如type=text,class=active

整个html文档就是一个文档节点。所有的节点都是Object

2.3获取DOM(事件源)的三种方式

var getelement_by_id = document.getElementById('box_id');//1.通过id获取单个标签。
var getelement_by_tagname = document.getElementsByTagName('div')[0];//2.通过 标签名 获得 标签数组。
var getelement_by_classname = document.getElementsByClassName('box')[0];//3.通过 类名 获得 标签数组。

2.4setAttribute()和getAttribute()

var id = div_tag.getAttribute('id');//获取对应的属性名的值
div_tag.setAttribute('title','div_title');//第一个参数是属性名，第二个参数是属性值

2.5DOM节点三个重要的属性

1.nodeName：节点名称
2.nodeValue：节点值
3.nodeType：节点的类型

"nodeName属性：节点的名称，是只读"
1.元素节点（即标签，div,p等）的nodeName与标签名相同。
2.属性节点的nodeName与属性名称相同
3.文本节点的nodeName永远是#text
4.文档节点的nodeName永远是#document

"nodeValue属性：节点的值"
1.元素节点的nodevalue是undefined或Null
2.文本节点的nodeValue是文本本身
3.属性节点的nodeValue是属性值

"nodeType属性：节点类型，是只读"
元素类型    节点类型
元素              1
属性              2
文本              3
注释              8
文档              9

    
    



文本节点
    

2.6节点对象常用属性

    
    




上一个兄弟
p1
p2
下一个兄弟
    

2.7节点对象在各个浏览器兼容性处理

    
    




上一个兄弟

    
p1
    
p2

下一个兄弟
    

2.8元素节点对象的增删改查

1.创建节点 createElement()
2.插入节点 appendChild() ，insertBefore(newNode,node)
3.删除节点 removeChild()
4.替换节点 replaceChild(newNode,node)
5.创建文本节点 createTextNode()

    
    




    
p标签内容--原有内容


    

2.9样式设置

    
    
    


p1标签内容
p2标签内容
    

2.10事件介绍

    
    


p1标签内容
p2标签内容
    

2.11onclick事件的互斥性小案例

    
    


p1标签内容

    

2.12鼠标悬浮事件

    
    


内容

    

2.13光标聚焦和失焦事件

    
    



    

        用户名：
        
    
    

        密码：
        
    
    


    

2.14表单控件上内容选中和改变事件

    
    


输入个人简介