1.DOM的概述
DOM(Document Object Model文档对象模型)将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。
2.DOM树
3.获取DOM节点
- getElementById(id名)
通过id名来获取对应元素
<body>
<div id="box">我是box</div>
<script>
// getElementById(id名) 通过id名获取元素
var box = document.getElementById('box')
box.innerHTML = '我获取到box了'
</script>
</body>
- getElementsByClassName(class名)
通过class名获取元素
<body>
<div class="box">我是box</div>
<div class="box">我是box</div>
<script>
// getElementsByClassName 通过class名获取元素,它获取到的是一个集合
// 这个集合不是数组,它叫做类数组对象(伪数组),它不能使用数组的API
// 但是它有下标,可以通过下标去获取对应元素,也可以通过length属性获取长度
// 如下所示:这个集合包含了所有class名为box的元素
var boxs = document.getElementsByClassName('box')
console.log(boxs) // HTMLCollection(2) HTML集合,里面有两个元素
// boxs[0].innerHTML = '我是box啊啊啊啊'
// boxs[1].innerHTML = '我也是box啊啊啊啊'
// 或者我们也可以通过for循环来给它们进行操作
for (var i = 0; i < boxs.length; i++) {
boxs[i].innerHTML = '我们都是box啊啊啊啊'
}
</script>
</body>
- getElementsByTagName(标签名)
通过标签名获取元素
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<script>
// getElementsByTagName(标签名),取到的也是一个类数组对象
var list = document.getElementsByTagName('li')
console.log(list) // HTMLCollection(4)
for (var i = 0; i < list.length; i++) {
list[i].style.background = 'red'
}
</script>
</body>
- querySelector() ES5新增选择器
<body>
<h1 id="title">title</h1>
<p class="pra">文字</p>
<div>我是div</div>
<span class="goods">我是第1个</span>
<span class="goods">我是第2个</span>
<span class="goods">我是第3个</span>
<span class="goods">我是第4个</span>
<script>
// querySelector() 它是一个选择器,可以通过id名,class名以及标签名来获取元素
var title = document.querySelector('#title')// 获取到h1
var pra = document.querySelector('.pra') // 获取到p
var div = document.querySelector('div') // 取到div
console.log(title) // <h1 id="title">title</h1>
console.log(pra) // <p class="pra">文字</p>
console.log(div) // <div>我是div</div>
// querySelector()只能取到第一个满足条件的元素
var goods = document.querySelector('.goods')
console.log(goods) // <span id="goods">我是第1个</span>
</script>
</body>
- querySelectorAll() ES5新增选择器
<body>
<button onclick='fn1()'>添加</button>
<button onclick="fn2()">移除</button>
<div id='box' class="box section"></div>
<script>
var div = document.querySelector('#box')
function fn1 () {
// classList.add() 添加class名
div.classList.add('ac')
console.log(div.className) // class名
console.log(div.classList) // 它是由class名组成的类数组对象
}
function fn2() {
// classList.remove() 删除class名
div.classList.remove('section')
console.log(div.className) // class名
console.log(div.classList) // 它是由class名组成的类数组对象
}
// clssList是由clsaa名组成的类数组对象,我们可以通过下标来取对应class名
console.log(div.classList[0])
</script>
</body>
- children,childNodes,nodeName,tagName
<body>
<div>
<!-- 注释 -->
<p></p>
<p></p>
</div>
<script>
var div = document.querySelector('div')
// 元素都有一个children属性,获取当前元素的子元素
console.log(div.children) // HTMLCollection(2) 获取到div下面的子元素,也就是两个p标签
// childNodes 获取的是子节点:注释,文本,标签全部都叫节点
// 取到的是一个类数组对象
console.log(div.childNodes) // NodeList(7)
// nodeName 我们可以通过它来判断节点类型
console.log(div.childNodes[0].nodeName) // #text 换行的文本节点
console.log(div.childNodes[1].nodeName) // #comment 注释节点
console.log(div.childNodes[3].nodeName) // P 大写的标签名
// 如果我们确切的知道这是一个标签名,还可以通过tagName直接获取标签名
console.log(div.tagName) // DIV
</script>
</body>
- previousElementSibling,firstElementChild,lastElementChild
<body>
<div>我是div</div>
<ul>
<li>红烧鲤鱼</li>
<li>回锅肉</li>
<li>麻辣小龙虾</li>
</ul>
<script>
// A元素.previousElementSibling 我们可以找到A元素的上一个兄弟元素
// 此处A元素为ul,它上面的兄弟元素是div
var ul = document.querySelector('ul')
var bro = ul.previousElementSibling
console.log(bro) // <div>我是div</div>
// A元素.firstElementChild 找到A元素的第一个子元素
var fchi = ul.firstElementChild
console.log(fchi) // 红烧鲤鱼
// A元素.lastElementChild 找到A元素的最后一个子元素
var lchi = ul.lastElementChild
console.log(lchi) // 麻辣小龙虾
</script>
</body>
4.操作DOM
<body>
<ul>
<li>首页</li>
<li>列表</li>
<li id="about">关于</li>
<li id="user">个人</li>
<li id="shopping">购物</li>
</ul>
<script>
// createElement()创建节点
// 创建一个div元素,用box变量来接收
var box = document.createElement('div')
// 通过js设置的style样式都是行内样式
box.innerHTML = '我是box'
box.style.width = '200px'
box.style.height = '200px'
box.style.background = 'red'
// appendChild(childNode)将新节点追加到子节点的末尾
document.body.appendChild(box)
document.body.appendChild(box) // 如果append同一个元素,最终还是只有一个(我们需要先克隆)
// cloneNode(boolean)克隆节点,传入一个布尔值,
// true表示深克隆,复制该节点及该节点下的所有子节点,false表示浅克隆,只复制该节点
// 注意点:如果元素有id属性不要去克隆,否则会出现两个id相同的元素(id要唯一)
var box1 = box.cloneNode() //浅克隆
document.body.appendChild(box1) // 页面克隆后的div里面的内容没有(因为这是浅克隆)
var box2 = box.cloneNode(true) // 深克隆
document.body.appendChild(box2) // 这时克隆后的div跟原来的div一样
// inserBefore(newNode,targetNode)将newNode插入到targetNode之前
var ul = document.querySelector('ul') // 获取ul
var li = document.createElement('li') // 创建一个li
var about = document.querySelector('#about') // 获取关于li
li.innerHTML = '联系'
// ul.appendChild(li) // appendChild会放到末尾
ul.insertBefore(li,about) // 这样就放在了关于的前面了
// replaceChild(newNode,targetNode)使用newNode替换targetNode
var user = document.querySelector('#user')
var msg = document.createElement('li')
msg.innerHTML = '信息'
ul.replaceChild(msg,user) // 在ul里面把个人换成信息
// removeChild(childNode)移除目标节点
// 在知道父级元素的时候 父级元素.removeChild(childNode)
var shopping = document.querySelector('#shopping')
// ul.removeChild(shopping)
// 当不知道父级元素的时候我们可以通过 parentNode找到自己的父级元素
// shopping.parentNode.removeChild(shopping)
// 直接删除:目标元素.remove() IE8用不了
shopping.remove()
</script>
</body>
5.文档碎片
createDocumentFragment()
<body>
<ul></ul>
<script>
// 需求:往ul里面加入10个li
// 1.for循环,创建10个li,append 10次,进行了10次DOM操作
var ul = document.querySelector('ul')
/* for (var i = 0; i < 10; i++) {
var li = document.createElement('li')
li.innerHTML = i+1
ul.appendChild(li)
}
*/
// 2.可以用一个文档碎片,先把10个li放入碎片里(减少了DOM操作,性能更优)
// 然候把碎片插入ul,这样就只有一次DOM操作
var cache = document.createDocumentFragment()
for (var i = 0; i < 10; i++) {
var li = document.createElement('li')
li.innerHTML = i+1
// li放到文档碎片(cache)里面
// 这里的append是在计算机里面操作的不是在页面上操作的
cache.appendChild(li)
}
// 把cache插入到ul里
ul.appendChild(cache)
</script>
</body>
6.获取元素属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('div')
// box.style这种方式只能获取或者设置行内样式
// console.log(box.style.width) // 什么都没有,获取不到
// 获取内部或者外部样式,非IE浏览器写法
var width = getComputedStyle(box,false).width
console.log(width) // 200px
// 根据兼容性封装一个获取样式的方法
// obj:要获取样式的对象
// attr:属性名
function getStyle (obj,attr) {
if (obj.currentStyle) {
// 判断obj是否有currentStyle这个属性,有就是IE浏览器
return obj.currentStyle[attr]
} else {
// obj没有currentStyle这个属性,说明不是IE浏览器
return getComputedStyle(obj,false)[attr]
}
}
var height = getStyle(box,'height')
console.log(height) // 300px
</script>
</body>
</html>
7.DOM尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 300px;
padding: 20px;
border: 5px solid #ccc;
background: red;
}
</style>
</head>
<body>
<div class="box">box
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
<p>box</p>
</div>
<script>
function getStyle (obj,attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
} else {
return getComputedStyle(obj,false)[attr]
}
}
var box = document.querySelector('.box')
var width = getStyle(box,'width')
console.log(width) // 200px 不包括padding,border,单纯的width属性值
// offsetWidth是DOM提供的一个属性,用来获取元素的占位尺寸(包含padding,border不包含margin)
// 获取到的值是数字,px帮我们去掉了
var width1 = box.offsetWidth
console.log(width1) // 240
// offsetHeight 用法跟 offsetWidth 一样,就是一个宽的方向一个高的方向
// clientWidth
var width2 = box.clientWidth
console.log(width2) // 240 (不包含border)
// clientHeight 用法跟 clientWidth 一样
// scrollHeight 滚动高度 (scrollWidth一样用法)
// 获取的是可滚动内容的总高度,如果box没有滚动条,跟clientHeight是一样的
// 内容超出的时候获取的是总内容的高度
var height = box.scrollHeight
console.log(height) // 411
// offsetWidth,offsetHeight
// clientWidth,clientHeight
// scrollWidth,scrollHeight
// 这三对属性都是只读的,不能设置
// box.offsetWidth = 800 无效的,设置不了
</script>
</body>
</html>
8.DOM位置
-
clientLeft和clientTop
获取左边框和上边框的宽度 -
offsetLeft和offsetTop
元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框)
元素的边框的外边缘距离与已定位的父容器(offsetparent)的上边距离(不包括元素的边框和父容器的边框) -
scrollTop和scrollLeft
获取滚动内容上方的高度(就是滚动条上面隐藏的内容的高度)
获取滚动内容左方的宽度(就是滚动条左边隐藏的内容的宽度)