DOM
Document Object Model 文档对象模型
节点
节点属性
//=======结构=======
<body>
aaaa
<div id="div1">
<span></span>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
</body>
a.nodeName
节点名 如果是标签 节点名就是标签名，大写
var div=document.getElementById("div1");
console.log(div.nodeName);//-----DIV
b.nodeType 节点类型
1.元素 2.属性 3.文本 4.注释 5.文档
c.nodeValue 节点值
文本内容和注释内容，标签没有节点值null
获取DOM元素
//===通过id获取元素列表
document.getElementById("div1");
//===通过class获取元素列表 HTMLCollection
document.getElementsByClassName("div");
//===通过标签名获取列表 HTMLCollection
document.getElementsByTagName("div")
//===通过name获取元素 大多数用于表单 NodeList 必须使用document
console.log(document.getElementsByName("name"))
//===可以通过选择器获取元素 如果有多个div使用选择器div时只能获取到列表中的第一个
document.querySelector("div.div1");
document.querySelector("div[type~=a]");
//===可以通过选择器获取所有元素列表 NodeList
document.querySelectorAll("div")
var div=document.getElementById("div1");
var span=div.getElementsByTagName("span");
console.log(span)
节点遍历
var div=document.getElementById("div1");
console.log(div.parentNode); 父节点
console.log(div.parentElement); 父元素
console.log(div.childNodes); 子节点 NodeList
console.log(div.children); 子元素 HTMLCollection
console.log(div.firstChild) 第一个子节点
console.log(div.firstElementChild) 第一个子元素
console.log(div.lastChild) 最后一个子节点
console.log(div.lastElementChild) 最后一个子元素
console.log(div.previousSibling) 上一个兄弟节点
console.log(div.previousElementSibling) 上一个兄弟元素
console.log(div.nextSibling) 下一个兄弟节点
console.log(div.nextElementSibling) 下一个兄弟元素
创建元素
把子元素添加在父元素的尾部
//====创建元素====
var div=document.createElement("div");
//===把子元素添加在父元素的尾部===
document.body.appendChild(div);
给ul里拼接10个li
var ul=document.createElement("ul");
for(var i=0;i<10;i++){
var li=document.createElement("li");
ul.appendChild(li);
}
document.body.appendChild(ul);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//===创建文档碎片
var a=document.createDocumentFragment();
//===循环
for(var i=0;i<100;i++){
var div=document.createElement("div");
a.appendChild(div);
}
document.body.appendChild(a);
将子元素插入到父元素的尾部
父元素.appendChild(子元素);
将元素插入在父元素中某个子元素的前面
父元素.insertBefore(新元素,插入在谁的前面);
// var div=document.createElement("div");
// document.body.insertBefore(div,document.body.firstChild);
复制元素
需要复制的元素.cloneNode(是否深复制));
//====深复制（true）--复制子元素 浅复制（false）--不复制子元素
var bn=document.querySelector("button");
var bn1=bn.cloneNode(true);
document.body.appendChild(bn1);
深复制 将该元素的节点和所有子节点及后代节点全部复制
浅复制 只复制当前元素
删除元素
元素.remove(); 删除
// bn.remove();
父元素.removeChild(子元素);
// document.body.removeChild(bn);
替换
父元素.replaceChild(新元素,旧元素);
// var p=document.createElement("p");
// document.body.replaceChild(p,bn);
BOM
Browser Object Model 浏览器对象模型
浏览器中JS可以控制所有对象 这些对象都是从属于window对象
document 文档
location 本地
history 历史
screen 屏幕
navigator 导航