document object model == 文档 对象 模型
document对象,属于window对象,在documet前面应该加window对象。当然,可以省略window对象。
1.获取元素:
(1)通过document获取节点
document.getElementById("标签id名"); // 通过标签的id名获取标签
document.getElementsByTagName("标签名"); // 通过标签名获取标签
document.getElementsByClassName("标签class类名"); // 通类名获取标签
document.getElementsByName("标签的name属性的值"); // 通过标签的name属性获取标签
注意:上述4种获取标签的方法,除了通过id可以准确获取到元素,别的方法都是只能获取到元素的集合(类数组),因为不具有唯一性,要得到具体的标签需要取下标(0 - ...)
(2)使用css选择器获取元素:
documen.querySelector(css选择器); // 获取到匹配css的第一个元素
documen.querySelectorAll(css选择器); // 获取到匹配css的所有元素
注意:getElements和querySelectorAll获取到的都是伪数组,但是当遍历元素的时候,querySelectorAll可以使用forEach方法遍历,但是getElements不行,只能使用for来遍历
2.属性操作:
元素.setAttribute(属性名,属性值) // 设置元素的属性(原本没有就是添加;原本有就是修改)
元素.getAttribute(属性名); // 获取元素属性
元素.removeAttribute(属性名); // 删除元素属性
3.内容操作:
(1)DOM元素.innerHTML - 可以设置/获取 当前标签内部 带有标签的内容
DOM元素.innerHTML=“<b>文字</b> ”;//显示加粗的文字俩字
(2)DOM元素.innerTEXT - 可以设置/获取 当前标签内部 文本内容
DOM元素.innerTEXT=“<b>文本</b> ”;//不能解析标签
(3)DOM元素.outerHTML - 可以设置/获取 包含当前标签的带标签文本
DOM元素.outerHTML=“<b>文本</b> ”;//b标签会替换掉原本的标签
4.样式操作:
DOM元素.style.css属性 = 值;
DOM元素[style][css属性] = 值;
eg:
<body>
<style type="text/css">
#box{
width:100px;
height:100px;
background:#f00;
}
</style>
<input type="button" id="btn" value="走你">
<div id="box"></div>
</body>
<script type="text/javascript">
var n = 0;
document.getElementById("btn").onclick=function(){
n += 100;
document.getElementById("box").style.marginLeft = n + "px"
}
</script>
5.类名操作:
元素.className = "类名字符串"
元素.className = " "//空时就表示不要类名
eg:
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div>
</script>
</body>
元素.className = "类名字符串"这种方法,只能存在一个class类名,多次设置会覆盖。
以下方法可以添加多个class类名:
添加一个class:
元素.classList.add()
移出一个class:
元素.classList.remove()
6.html基本结构的操作:
1. document.body // body比较常用, 并且在页面中是唯一的, 因此可以使用document.body直接获取
2. document.documentElement // 可以获取html元素及其所有内容
3. document.head // 可以直接获取head元素
4. document.title // 可以直接获取title的文本
DOM 就是我们 html 结构中一个一个的节点构成的。不光我们的标签是一个节点,我们写的文本内容也是一个节点,注释,包括空格都是节点。
DOM节点分三种:元素节点、文本节点、属性节点。元素节点就是我们获取到的标签元素;标签里面的文本就是文本节点、标签上的属性就是属性节点。
7.DOM节点的获取:
(1)获取节点
获取文本节点(空格、换行)、元素节点
节点 | 语法 |
---|---|
所有节点 | 元素.childNodes |
第一个节点 | 元素.firstChild |
最后一个节点 | 元素.lastChild |
上一个兄弟节点 | 元素.previousSibling |
下一个兄弟节点 | 元素.nextSibling |
父节点 | 元素.parentNode |
(2)获取元素节点
只获取元素节点,不会获取文本节点(空格、换行)
元素节点 | 语法 |
---|---|
所有子元素节点 | 元素.children |
第一个子元素节点 | 元素.firstElementChild |
最后一个子元素节点 | 元素.lastElementChild |
上一个兄弟元素节点 | 元素.previousElementSibling |
下一个兄弟元素节点 | 元素.nextElementSibling |
父元素节点 | 元素.parentElement |
(3)属性节点
属性节点 | 语法 |
---|---|
获取标签的所有属性 | 元素.attributes |
8.节点属性:
文本节点、元素节点、注释节点、属性节点
(1)nodeType:节点类型
<body>
<div id="box" name="hezi">
<p class="part" >段落标签</p>
<a href="#" title="跳转百度">链接</a>
<span>span标签</span>
<!-- div结束 -->
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box"); // div元素节点
var text = Odiv.firstChild; // 文本节点(中间的换行和空格)
var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释
var attr = Odiv.attributes[0]; // div的第一个属性,是属性节点
console.log(Odiv.nodeType); // 1:元素节点
console.log(text.nodeType); // 3:文本节点
console.log(note.nodeType); // 8:注释节点
console.log(attr.nodeType); // 2:属性节点
</script>
3:文本节点
1:元素节点
8:注释节点
2:属性节点
(2)nodeName:节点名称
<body>
<div id="box" name="hezi">
<p class="part" >段落标签</p>
<a href="#" title="跳转百度">链接</a>
<span>span标签</span>
<!-- div结束 -->
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box"); // div元素节点
var text = Odiv.firstChild; // 文本节点(中间的换行和空格)
var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释
var attr = Odiv.attributes[0]; // div的第一个属性,是属性节点
console.log(Odiv.nodeName); // DIV
console.log(text.nodeName); // #text
console.log(note.nodeName); // #comment
console.log(attr.nodeName); // id
</script>
#text:文本
#comment:注释
标签名的大写形式:标签元素
说明:元素节点的节点名称是大写的标签名;文本节点的节点名称是 #text ;注释节点的节点名称是#comment ;属性节点的节点名称是属性名。
(3)nodeValue:节点值
<body>
<div id="box" name="hezi">
<p class="part" >段落标签</p>
<a href="#" title="跳转百度">链接</a>
<span>span标签</span>
<!-- div结束 -->
</div>
</body>
<script type="text/javascript">
var Odiv = document.getElementById("box"); // div元素节点
var text = Odiv.firstChild; // 文本节点(中间的换行和空格)
var note = Odiv.lastChild.previousSibling; // 换行和空格前面是注释
var attr = Odiv.attributes[0]; // div的第一个属性,是属性节点
console.log(Odiv.nodeValue); // null
console.log(text.nodeValue); // "换行和空格"
console.log(note.nodeValue); // "div结束" --注释内容
console.log(attr.nodeValue); // "box" -- 属性值
</script>
文本内容:文本
null:标签元素
注释内容:注释
说明:元素节点没有节点值;文本节点的值就是文本内容;注释节点的内容就是注释的内容;属性节点的内容就是属性的值。
9.节点操作:
(1)创建节点:
属性名 | 功能 | 语法 |
---|---|---|
createElement | 创建元素节点(创建标签) | document.createElement(元素标签) |
createAttribute | 创建属性节点(创建属性,只有属性名,没有属性值) | document.createAttribute(元素属性) |
createTextNode | 创建文本节点(创建了一个内容) | document.createTextNode(文本内容) |
(2)插入节点:
属性名 | 功能 | 语法 |
---|---|---|
appendChild | 向节点的子节点列表末尾添加新的子节点 | 父节点.appendChild(所添加的新节点) |
insertBefore | 在已知的子节点前插入一个新的子节点 | 父节点.insertBefore(所要添加的新节点,已知子节点) |
(3)替换节点:
语法:父节点.replaceChild(新节点,被替换的旧节点)
(4)复制节点:
语法:被复制的节点.cloneNode( ) // 只复制一个空节点
被复制的节点.cloneNode(true) // 表示复制的节点包括里面的内容
(5)删除节点:
语法:父元素.removeChild(要删除的节点)
10.获取元素样式:
通过style属性来获取元素的样式:元素.style.css属性 = 值;
通过style属性来获取元素的样式有缺陷:只能获取行内样式,不能获取到内联和外联的样式。
获取所有方式的样式(内联、外联、行内):window.getConputedStyle(元素).css属性;
在ie中有兼容问题:元素.currentStyle;
兼容写法:
function getStyle(ele ,attr){ //ele:元素 attr:标签
if(window.getComputedStyle){
return window.getComputedStyle(ele)[attr]
}else{
return ele.currentStyle[attr];
}
}
11.元素间距和位置:
获取的位置/间距 | 语法 |
---|---|
获取左边的间距 | 元素.offsetLeft |
获取上边的间距 | 元素.offsetTop |
获取到设置过定位的父元素 | offsetParent |
获取元素自己的宽度(包含边框) | 元素.offsetWidth |
获取元素自己的高度(包含边框) | 元素.offsetHeight |
获取元素自己的宽度(不包含边框) | 元素.clientWidth |
获取元素自己的高度(不包含边框) | 元素.clientHeight |
12.DOM获取窗口大小:
BOM获取浏览器窗口大小(包含滚动条):
window.innerWidth
window.innerHeight
DOM获取浏览器窗口大小(不包含滚动条):
document.documentElement.clientWidth
document.documentElement.clientHeight