标签：console log DOM 元素 BOM div document 节点
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 导航
标签：console,log,DOM,元素,BOM,div,document,节点 来源： https://www.cnblogs.com/ciyisheng/p/15704461.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。