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

一.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();
  };