DOM

BOM

pattern:

直接在input标签里面添加正则表达式

DOM:

方法：

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

例：location.reload( );

replace( )加载新文档(跳转新网页)

特点：等同于把原来的文档替换成新文档，并且用的是一个窗口，由于原来的文档和新文档用的是同一个窗口，所以没有返回上一步的功能。
即：不可以返回上一步
例：location.replace("http//www.baidu.com");

assign( )加载新文档(跳转新网页)

特点：等同于跳转到一个新的链接，窗口显示新链接的内容，不等同于替换。
所以有返回上一步的功能
例：location.replace("http//www.qq.com");

history

window.hostory.go(0)：刷新当前页面
window.hostory.go(1)：跳转下一个页面
window.hostory.go(-1)：返回上一条记录
window.histroy.forward()：到达下一个页面(URL)
window.histroy.back()：返回上一个页面(URL)

screen

window.screen.width：返回当前屏幕宽度
window.screen.height：返回当前屏幕高度

DOM：

Document Object Model
文档对象模型

功能：可以操作HTML文档

BOM 接口 对应到HTML

节点

有一个页面，就会有一个DOM节点树。
DOM树结构的节点由以下三个部分组成：
1：元素节点：HTML的标签
2：文本节点：标签包含的文本内容(元素内容)
3：属性节点：开始标签包含的属性
注：属性节点不属于元素节点的子节点

节点的类型

节点名称：nodeName
节点类型：nodeType
节点值：nodeValue

nodeName	nodeType	节点类型Nuber	nodeValue
元素节点	Node.ELEMENT_NODE()	1	标签名
属性节点	Node.ATTRIBUTE_NODE()	2	属性名
文本节点	Node.TEXT_NODE()	3	#text
文档节点	Node.DOCUMENT_NODE()	9
注释节点	Node.TEXT_NODE()	8

let Div=document.getElementByID("abc");//获取元素
Div.Node.ELEMENT_NODE() ==1;//判断是否为元素节点

快速查找节点

除了ById是唯一值以外
其他查找元素的内容，都会返回多个值
多个值以类数组方式存储(浏览器的后台会以NodeList进行展示)

1：getTlemetById//通过ID获取元素
let   aEle=document.getElementById("a002");

2:getElementsByClassName//通过类名获取元素
let divEle=document.getElementsByClassName("boo1")[0];
//注：由于class的名字可以相同，最终可能会获得到多个节点因此，通过类名来获取元素的方式，会返回一个类数组。可以通过下标的方式进行相应内容的查找和展示。

3:document.getElementsByTagName();//通过标签来获取元素
let divEle=document.getElementsByTagName("div");
//注：由于标签的名字可以相同，最终可能会获得到多个节点因此，通过标签名来获取元素的方式，会返回一个类数组。可以通过下标的方式进行相应内容的查找和展示。

4:document.getElementsByName();//通过标签来获取元素
//注：name是标签的属性名
let divEle=document.getElementsByName("username");

//通过css选择器进行查找
5:document.querySelector
6:document.querySelectorAll
//注：5和6有以下特点
//A:IE8及以下的版本都无法识别
//B:无法实时反馈元素
//即：当页面进行了元素的添加或删除时，层次结构发生的变化。而这两个方法是不会实时更新的，依然使用原来的层次结构

关系层次查找节点

let asEle=docuent.querySelector("aside");

1：查找父级节点

console.log(asEle.parentNode);
注：父元素最多到document，再往上找就会返回null

查找子节点

//格式：父元素.childNodes
//例：
<section>
<aside class="as1" id="as1">
<aside/>
<section>

let asEle=document.querySelector("section")[0];
//查找节点

console.log(asEle.childNodes.length);//3
console.log(asEle.childNodes.[0]);//#text

//3：第一个子元素(firstChild)
//let asiEle=aocument.getElementsByTagName("aside")[0];
console.log(asiEle.firstChild);//空白 文本内容

//null：无内容，无回车和空格
//空白：无内容

//4：最后一个子元素(lastChild)
//let asiEle=aocument.getElementsByTagName("aside")[0];
console.log(asiEle.lastChild);//空白 文本内容

//5：找兄弟节点(后一个)
//格式：元素.nextSibling
//例：
let secEle =document.getElementsByClassName("sec1")[0];2
console.log(secEle.nextSibling)//null

//找兄弟节点(前一个)
//格式：元素.previousSibling
//例：
let secEle =document.getElementsByClassName("sec1")[0];2
console.log(secEle.previousSibling)//null

关系层次查找元素

//1：查找父元素
//格式：子元素.parentElement
//例：
secEle.parentElement

//2：查找子元素
//格式：父元素.children
//例：
secEle.children
//注：之获取元素节点(其他的文本节点，注释节点等都不会在其中)

//3：查找第一个子元素
//格式：父元素.firstElementChild
//例：
sec.firstElementChild

//4：查找最后一个子元素
//格式：父元素.lastElementChild
//例：
sec.lastElementChild

//5：找兄弟节点(后一个)
//格式：元素.nextElementSibling
//例：
secEle.nextElementSibling

//找兄弟节点(前一个)
//格式：元素.previousElementSibling
//例：
secEle.previousElementSiblingd

节点的操作

1：创建一个新节点到页面(添加一个新元素到页面);
格式1：document.creatElement("标签名");创建一个元素
格式2：父节点.createElemet("标签名");
例1：
let seEle=document.creatElement("div");
例2：
let seEle=document.getElementsByClassName("sec1")[0];
seEle.creatElement("div");

2：创建节点内容(文本节点)
格式：标签名.createTextNode("文本内容")
例：
let divTN=document.createTextNode("JG445");

3：添加新的元素节点
格式：父标签.appendchild(新节点)
例：
创建一个带有文本节点的元素
let divEle=document.createElement("div");
let divTN=document.createTextNode("JG445");
divEle.appendchild(divTN)
//
把新元素添加到页面中
bodyEle.appendChild(divEle);

4：添加到某个元素的前面
step1:先把这个元素获取
step2:获取父级元素
step3：把新元素添加到元素之前
格式：父元素.insertBefore(新元素,旧元素);
功能：会把新元素添加到旧元素之前

例：创建一个新元素，再把内容放到里面去。
获取位置标签
let dec1 = document.getElementById("a1")[0];
let artEle=document.querySelector("article");
artEle.insertBefore(divEle,secEle);

5：删除一个节点
step1：获取父节点
step2：获取删除的节点
step3：删除节点
格式：父节点.remove(子节点)

例：
let artEle = document.querySelector("article");
let dec1 = document.getElementsByName("section")[0];
artEle.remove(sec1);

6:修改一个节点(替换节点)
格式：父节点.replaceChild(新节点,旧节点);

1：获取父节点
let parEle= spanEle.parentElement;
2：替换其中某一个子元素
parEle.rarentElement(newEle,oldEle);

7：复制节点(克隆节点)
浅克隆
divEle.cloneNode(false)
深克隆
divEle.cloneNode(true)

8：创建注释节点
格式：父节点.createCommnet("我是一个注释")

例：
let Comt= document.createComment("我是一个注释");
secEle01.appendChild(Comt,secEle_div);//secEle是加注释的父元素

文本的操作

1：innerText
元素节点.innerText
例：
div.innerText
a>可以获取元素的文本内容
let divEle=div.innerText;
b>并且可以设置元素的文本内容
let divEle=div.innerText="JG445";

2：innerHTML
元素节点.innerHTML
例：
div.innerHTML
a>可以获取元素的文本内容和子元素
let divEle=div.innerHTML;
b>并且可以设置元素的文本内容和子元素
let div.innerHTML="<span>JG445</span>"

3：TextContent
功能：获取文本内容
TextContent与innerText的区别
innerText只获取在页面中显示元素的文本内容。
TextContent不仅可以获取在页面中显示元素的文本内容，
并且也可以把display为none的元素内容也获取到。

属性节点的操作

1：获取属性节点
格式：节点名.getAttribute("属性名");
例：inputEle[0].getAttribute("class");
注：获取div标签的id值

2：设置属性值
格式：节点名.setAttribute("属性名","属性值");
例：div.setAttribute("id","JG445");

3：创建一个属性节点
(1)：创建属性名
let arrEle=document.createAttribute("name");
(2)：创建属性值
arrEle.nodeValue="JG445";
(3)：把属性节点添加到相应的标签
inputEle[2].attributes.setNamedItem(arrEle);

4：删除一个属性节点
格式：节点.removeAttribute(属性名);
document.removeAttribute("name");

5：判断当前标签是否存在某个属性
格式：节点.hasAttribute(属性名)
补充：判断是否存在子节点  节点.hasNodeChild
例：div.hasAttribute("name")//返回布尔值(T,F)

6：如何获取/修改多个类名的值

CSS操作

1：对节点添加样式
格式：节点.style.css属性名=CSS属性值
例：
h1Ele.style.color="red";
//由于在JS中连字符是有特殊含义的，所以不可用
h1Ele.style.backgroundColor="black";

2：获取元素的尺寸
格式：节点.clientWidth;
div.clientWidth;
div.clientHeight;

3：获取元素的位置
格式：节点.offsetLeft
     节点.offsetTop



Continue:结束当前循环
break：结束整个循环