前端--javaScript之BOM和DOM

BOM和DOM概述

BOM(Browser Object Model):是指浏览器对象模型,它使js有能力和浏览器进行"对话".

DOM(Document Object Model):是指文档对象模型,通过它,可以访问HTML文档的所有元素.

BOM:

window对象是客户端js最高层对象之一,由于window对象是其他大部分对象的共同祖先,在调用window对象的方法和属性时,可以省略window对象的引用.例如window.document.write()可以简写成:document.write().

一.window对象

所有浏览器都支持window对象.它表示浏览器窗口.

*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

所有js全局对象.函数以及变量均自动成为window对象的成员.

全局变量是window对象的属性.全局函数是window对象的方法.

一些常用的window方法:

• window.innerHeight------浏览器窗口的内部高度
• window.innerWidth------浏览器窗口的内部宽度
• window.open()------打开新窗口
• window.close()------关闭当前窗口

二.navigator对象(了解)

浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含浏览器信息.

navigator.appName        //web浏览器全称
navigator.appVersion        //web浏览器厂商和版本的详细字符串
navigator.userAgent        //客户端绝大部分信息
navigator.platform        //浏览器运行所在的操作系统

三.screen对象(了解)

屏幕对象,不常用.

一些属性:

screen.availWidth------可用的屏幕宽度

screen.availHeight------可用的屏幕高度

四.history对象(了解)

window.history 对象包含浏览器的历史.

浏览器历史对象,包含了用户对当前页面的浏览历史,但我们无法查看具体地址,可以简单的用来前进或后退一个页面

history.forward()    //前进一页
history.back()        //后退一页

五.location对象

window.location对象用于获得当前页面的地址(URL),并把浏览器定向到新的页面.

常用属性和方法:

location.href        //获取URL
location.href = "URL"    //跳转到指定页面
location.reload()        //重新加载页面

六.弹出框

可以在js中创建三种消息框:警告框,确认框,提示框

1.警告框

　　警告框经常用于确保用户可以得到某些信息.

　　当警告框出现后,用户需要点击确定按钮才能继续进行操作.

语法:

alert("你看到了么?");

2.确认框(了解)

　　确认框用于使用户可以验证或者接受某些信息.

　　当确认框出现后,用户需要点击确认或者取消按钮才能继续进行操作.

　　如果用户点击确认,name返回值为True,如果点击取消,name返回值为False.

语法:

confirm("你确定么?")

3.提示框(了解)

　　提示框经常用于提示用户在进入页面输入某个值.

　　当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵

　　如果用户点击确认,那么返回值为输入的值,如果用户点击取消,那么返回值为null.

语法:

prompt("请在下方输入:","你的答案")

七.计时相关

通过使用js,我们可以在一定时间间隔之后来执行代码,而不是在函数调用后立即执行.我们称之为计时事件.

1.setTimeout()

var t = setTimeout("js语句","毫秒")

setTimeout()方法会返回某个值,在上面的语句中,值被储存在名为t的变量中.

2.clearTimeout():清除计时

语法:

//在指定时间之后执行函数
var t = setTimeout(function(){alert(123);},3000)
//取消setTimeout
clearTimeout(t)

3.setInterval()

　　setInterval()方法可按照指定的周期(以毫秒计)来调用或计算表达式.

　　setInterval()方法会不停的调用函数,直到clearInterval()被调用或者窗口被关闭.

语法:

setInterval("js语句","时间间隔")

4.clearInterval()

　　clearInterval()方法可取消有setInterval()设置的timeout.

　　clearInterval()方法的参数必须是由setInterval()返回的ID值.

语法:

clearInterval(setInterval返回的ID值)

DOM

一.什么是HTML DOM

　　HTML Document Object Model (文档对象类型)

　　HTML DOM 定义了访问和操作HTML文档的标准方法

　　HTML DOM 把HTML 文档呈现为带有元素,属性和文本的树结构(节点树)

二.DOM树

DOM树是为了展示文档中各个对象之间的关系用于对象的导航.

三.DOM节点

1.节点类型

HTML 文档中的每一个成分都是节点.

DOM是这样规定的:

• 文档节点(document对象)：代表整个文档
• 元素节点(element 对象)：代表一个元素（标签）
• 文本节点(text对象)：代表元素（标签）中的文本
• 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
• 注释是注释节点(comment对象)　

JavaScript 可以通过DOM创建动态的 HTML：

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

document和attribute节点是重点

2.节点关系

四.查找标签

1.直接查找

document.getElementById            根据ID获取一个标签
document.getElementsByClassName    根据class属性获取
document.getElementsByTagName      根据标签名获取标签集合

2.间接查找

parentElement        　　　 父节点标签元素
children        　　　　　　 所有子标签
firstElementChild　　　　　　第一个子标签元素
lastElementChild           最后一个子标签元素
nextElementSibling         下一个兄弟标签元素
previousElementSibling     上一个星弟标签元素

五.节点操作

1.创建节点

语法:

creatElement(标签名)

示例:

var divEle = document.createElement("div");

2.添加节点

语法 :

追加一个子节点(作为最后的子节点)

父标签.appendChild(新标签)

把增加的节点放在某个节点的前边

父标签.insertBefore(新标签,子标签)

3.删除节点

语法:

获得要删除的元素,通过父元素调用删除.

父标签.removeChild(要删除的节点)

4.替换节点

语法:

父标签.replaceChild(新标签,旧标签)

5.属性节点

获取文本节点的值:

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

设置文本节点的值:

var divEle = document.getElementById("d1")
divEle.innerText = "1"
divEle.innerHTML = "<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")
divEle.getAttribute("age")
divEle.removeAttribute("age")
 
// 自带的属性还可以直接.属性名来获取和设置
imgEle.src
imgEle.src="..."

6.获取值操作

语法:

elementNode.value

适用于以下标签:

.input

.select

.textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

7.class的操作

className  获取所有样式类名(字符串)
 
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

8.指定css操作

obj.style.backgroundColor="red"

js操作css属性的规律:

1.对于没有中横线的css属性一般直接使用style,属性名即可.如:

obj.style.margin
obj.style.width
obj.style.left
obj.style.position

2.对于含有中横线的css属性,将中横线后面的第一个字母换成大写即可.如:

obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily

六.事件

1.事件类型:

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。
 
onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
 
onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
 
onload         一张页面或一幅图像完成加载。
 
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开
 
onselect       文本被选中。
onsubmit       确认按钮被点击

2.绑定事件的方式:

方式一

<!--绑定事件的方式一-->
<div onclick="foo(this)">div</div>
<div class="c1">div2</div>
<script>
    function foo(self) {
        console.log(self); //<div onclick="foo(this)" style="color: red;">
        self.style.color = 'red';
    }

方式二

//方式二
//    事件的绑定方式2：标签对象.on事件 = function (){}
     var ele=document.getElementsByClassName("c1")[0];
     ele.onclick=function () {
        console.log(this); // this 代指： 当前触发时间的标签对象；
        this.style.fontSize="30px"
    };