DOM与BOM,DOM属性
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);
DOM属性
div.innerHTML
获取 HTML 内容
设置 HTML内容
div.innerText
获取 获取当前元素的文本及后代的所有文本组成的字符串
设置 当使用\n和\r 会自动补充<br>换行
div.textContent
获取 可以获取到当前元素的文本及后代所有文本组成字符串及格式
设置 当使用\n和\r 并不会换行
document.createTextNode(文本) 创建文本节点
var txt=document.createTextNode("3");
div.insertBefore(txt,div.firstElementChild);
如果标签属性时系统自带的该标签的属性，这时候我们可以通过DOM对象调用该属性（除class以外）
<input type="text" id="input" class="divs">
var input=document.querySelector("#input");
console.log(input.type);
class 属性使用className获取和设置
console.log(input.className)
所有可以不用赋值的属性（属性名和属性值相同的）
<input type="text" id="input" value="123" name="textInput" disabled>
<input type="checkbox" checked>
disabled 和 checked，在DOM 对象中使用布尔值来设置和取消
var input=document.querySelector("#input");
input.disabled=true;
div.a=10; console.dir(div)获取div得所有属性
自定义的也包括对象属性和标签属性，这两种自定义的属性，不共通
设置和获取标签属性div.setAttribute(标签属性名,标签属性值)
获取标签属性div.getAttribute(标签属性名);
删除标签属性div.removeAttribute(标签属性名)
标签属性的命名和赋值要注意 使用-连接，不要写大写字母
document.title
document.body
document.documentElement
document.head
document.URL //地址
document.domain //域名
console.log(document.URL)
console.log(document.domain)
DOM样式
样式 CSS样式 行内样式
console.log(div.style.width) 获取div的行内样式属性
获取计算后样式
var style=getComputedStyle(div);console.log(style.color)//兼容低版本
console.log(div.currentStyle.color)
try catch
var width;
try{
// 试试
width=getComputedStyle(div).width;
}catch(e){
// 如果上面试试出错，执行下面的内容
width=div.currentStyle.width;
}
console.log(width)
设置行内样式
div.style="width:50px;height:50px;color:blue;background-color:red";
div.style.width="50px";
div.style.height="50px";
div.style.color="blue";
div.style.backgroundColor="red"
function cloneObj(target,source){
for(var key in source){
target[key]=source[key];
}
}
var div=document.querySelector("div");
cloneObj(div.style,{
width:"50px",
height:"50px",
backgroundColor:"red"
})
Object.assign(div.style,{
width:"50px",
height:"50px",
backgroundColor:"blue",
} as CSSStyleDeclaration)
需要删掉
DOM的对象属性
client 客户的
offset 偏移的
scroll 滚动条的
clientWidth clientHeight 内容+padding-滚动条轨道宽度
offsetWidth offsetHeight 内容+padding+border 实际占位宽高
scrollWidth scrollHeight 实际内容宽高，如果实际内容宽高小于client宽高时，等于客户宽高
body
如果内容宽度不超过html宽度时，三个值相同
如果内容宽度超过了html宽度时，clientWidth等于offsetWidth都是html宽度-滚动条滑道宽度
三个高度是完全一样的，都是内容高度
console.log(document.body.clientWidth,document.body.clientHeight)
console.log(document.body.offsetWidth,document.body.offsetHeight)
console.log(document.body.scrollWidth,document.body.scrollHeight)
html
clientHeight 可视区域高度-滚动条轨道高度
offsetWidth clientWidth 可视区域宽度
offsetHeight scrollHeight 内容高度
scrollWidth 内容宽度
console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight)
console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight)
console.log(div3.clientLeft,div3.clientTop);//元素的边线粗细
console.log(div3.offsetLeft,div3.offsetTop);//距离父元素的左上角距离（父元素定位）
console.log(div2.scrollLeft,div2.scrollTop);
div2.scrollTop=300; //容器的滚动条位置 这个值是可读可写，其他属性都不可写只能读
console.log(div3.scrollTop)
早期版本中滚动条属于body，现在是html的
html的滚动条必须在页面渲染完成后才可以设置的，如果是元素的滚动条可以直接设置
document.body
document.documentElement
BOM
Browser Object Model 浏览器对象模型
浏览器中JS可以控制所有对象 这些对象都是从属于window对象
document 文档
location 本地
history 历史
screen 屏幕
navigator 导航
