一.BOM(浏览器对象模型)

1.window对象–时间函数

(1)延迟执行定时器|setTimeout()

 setTimeout(function(){...要执行的代码...},时间(毫秒数));

 setTimeout(function(){div.innerHTML="延时计时器";},1000);

(2)重复执行定时器|setInterval()

 setInterval(function(){...要执行的代码...},时间(毫秒数));

 setInterval(function(){i++;div.innerHTML=i;},1000);

(3)清除定时器|clearTimeout|clearInterval

        d=setInterval(function(){...要执行的代码...},时间(毫秒数));clearInterval(d);

2.history对象

三个方法,通过history.调用

(1)前往下个页面|forward()

history.forward()

(2)返回上个页面|back()

history.back()

(3)直接前往相应页面|go(number|URL)

history.go(1)//前往下个页面
history.go(-2)//返回上上个页面

3.location对象

(1)属性

href:设置或返回完整的URL,可后退

alert(window.location.href);//获取完整的url
//可以后退
location.href="http://www.baidu.com";

(2)方法

reload():重新加载当前文档|刷新

location.reload();

replace():用新文档替换当前文档|跳转,不可后退

//不可后退
location.replace("http://www.baidu.com")

二.DOM(文档对象模型)|Document Object Model

1.理解

DOM赋予我们可以操作页面的能力,可以创建,插入,修改,删除元素等.
Web 浏览器生成一个树型结构，用来表示页面内部结构.
DOM 将这种树型结构理解为由节点组成，组成一个节点树.
节点:HTML页面中的所有内容的都是节点,而DOM就是用来操作节点.

2.获取节点四种方式

(1)通过id获取唯一一个元素节点

document.getElementById("id值");

(2)通过元素名获取一组元素

主语.getElementsByTagName("元素名");
主语:document|父节点

(3)通过class属性值获取一组元素

主语.getEelementsByClassName("class属性值")
主语:document|父节点

(4)通过name属性

主语.getElementsByName("name属性值")

3.创建节点和插入节点

(1)createElement()|创建

主语.createElement("元素标签名");
参数:元素标签名
主语:document
返回值:创建的新节点

document.createElement("div");

(2)appendChild()|插入

主语.appendChild(节点名);
参数:要插入的节点
主语:父节点
返回值:追加的节点
追加元素:在父节点的最后位置追加

//创建一个div标签
var d=document.createElement("div");
//自己创建的节点插入到body内
document.body.appendChild(d);
//创建一个p标签
var p=document.createElement("p");
//在p标签内写入内容
p.innerText="王小鱼";
//将p节点插入到d节点内
d.appendChild(p)

(3)insertBefore(childNode1,childNode2)|插入

主语.insertBefore(childNode1,childNode2);
参数:childNode1  要插入的节点childNode2  父节点中的指定子节点
主语:父节点
返回值:第一个参数,要插入的节点
注意:childNode2参数的值若为null,undefined,实现的是追加的效果,并且该参数必须得给

//创建一个div标签
var d=document.createElement("div");
//自己创建的节点插入到body内
document.body.appendChild(d);
//创建一个p标签
var p=document.createElement("p");
//在p标签内写入内容
p.innerText="王小鱼";
//将p节点插入到d节点之前
document.body.insertBefore(p,d);
//追加的效果
document.body.insertBefore(p,undefined);

4.间接查找节点

 var div2=document.getElementsByClassName("wxy");//childNodes 返回元素的一个子节点的数组  包括文本节点console.log(div2[0].childNodes);//所有子节点console.log(div2[0].children);//所有元素节点//firstChild    返回元素的第一个子节点console.log(div2[0].firstChild);//文本节点//lastChild     返回元素的最后一个子节点console.log(div2[0].lastChild);//文本节点//firstElementChild  返回第一个元素子节点console.log(div2[0].firstElementChild);//lastElementChild   返回最后一个元素子节点console.log(div2[0].lastElementChild);//nextSibling        返回元素的下一个兄弟节点console.log(div2[0].nextSibling);//previousSibling    返回元素的上一个兄弟节点console.log(div2[0].previousSibling);//nextElementSibling      返回上一个元素兄弟节点console.log(div2[0].nextElementSibling);//previousElementSibling  返回下一个元素兄弟节点console.log(div2[0].previousElementSibling);//parentNode    返回元素的父节点console.log(div2[0].parentNode);

5.替换节点,克隆节点,删除节点

(1)replaceChild(child1,child2)|替换

主语.replaceChild(child1,child2);
参数:child1  要替换的节点child2  被替换的节点
主语:父节点
返回值:被替换的节点
注意:如果child1是原有的元素,相当于移动

(2)cloneNode(boolean)|克隆

主语.cloneNode(boolean);
参数:true   克隆当前节点及其包含的子节点false  不包含子节点,只克隆当前节点,默认false
主语:被克隆的节点
返回值:克隆的节点
注意:JS代码不会被克隆,如果原节点存在id属性,需要手动修改新节点的id属性

(3)removeChild()|删除

主语.removeChild();
参数:要移除的节点
主语:父节点
返回值:被移除的节点

6.操作表单form

(1)表单元素:

都可以根据dom获取节点的方式获取
特殊获取方式:form节点.name

<form action="">
<input type="text" name="username" value="zhangsan">
</form>
//根据form元素名获取一组form元素
var form=document.getElementsByTagName("form");
//特殊获取方式
form[0].username.value

(2)表单元素事件:

onchange|内容有改变触发事件
oninput|内容有输入触发事件

form[0].username.function(){console.log("输入触发")};
form[0].username.function(){console.log("改变触发")};

(3)form事件

onsubmit()|提交表单
onreset()|重置

form[0].function(){console.log("表单要提交了");};
form[0].function(){console.log("重置了");};

(4)form方法

submit()|提交
reset()|重置

form[0].btn.function(){console.log("做好准备,我要提交了");form[0].submit();//form[0].reset();};

JavaScript的BOM(浏览器对象模型)部分知识点与DOM(文档对象模型)相关推荐

JavaScript - WebAPI - BOM浏览器对象模型
1.1-BOM与DOM介绍 JavaScript语言由三部分组成 ECMAJavaScript:定义了js的语法规范 Dom:document object model文档对象模型:一个HTML文档中 ...
JavaScript基础——BOM浏览器对象模型
目录 Window Navigator Location History Screen 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话".BOM可以使我 ...
JavaScript（七）—— BOM 浏览器对象模型
本篇为 JavaScript 系列笔记第七篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
JavaScript BOM浏览器对象模型
什么是BOM浏览器对象模型? 浏览器对象模型(Browser Object Model(BOM))允许JavaScript与浏览器对话 BOM:浏览器对象模型 //宿主对象 BOM 提供了很多对象,用 ...
Javascript的HTML BOM(浏览器对象模型)
Javascript的HTML BOM(浏览器对象模型) 一.Window 对象浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话". Browser O ...
BOM——浏览器对象模型
BOM 浏览器对象模型 BOM 的概念 • BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的.可以与浏览器窗口进行互动的对象结构.BOM 由多个 ...
BOM浏览器对象模型(Browser Object Model)
文章目录一.BOM浏览器对象模型(Browser Object Model) window对象 window对象的方法 navigator/location/history/screen对象 nav ...
JS BOM浏览器对象模型
BOM浏览器对象模型 bom概述 BOM(Browser Object Model) 即浏览器对象模型,它提供了独立于内容与浏览器窗口进行交互的对象,其核心对象的window BOM由一系列相关的对象 ...
JavaScript高级程序设计第12章---BOM浏览器对象模型
第12章 BOM 本章内容: 理解BOM的核心--window 对象控制窗口及弹窗通过location 对象获取页面信息使用navigator 对象了解浏览器通过history 对象操作浏览器 ...
BOM—浏览器对象模型（Browser Object Model）
1,javascript 组成部分: 1.ECMAscript(核心标准): 定义了基本的语法,比如:if for 数组字符串 ... 2.BOM : 浏览器对象模型(Browser ...

JavaScript的BOM(浏览器对象模型)部分知识点与DOM(文档对象模型)