DOM:document object model - 文档对象模型
利用对象模型操作html文档的
顶层对象 - document
html 基本结构
标签
html - console.log(document.documentElement)
body - console.log( document.body );
head - console.log( document.head)
文本 - title - console.log( document.title)
修改标签 - document . title = '你好'
标签获取
1.通过id名来获取 - 方法 - document.getElementById('id名')
2.通过标签名来获取 - 方法 - document.getElementsByTagName('标签名') - 获取到的是一个集合,集合中会将当前页面中所有当前标签都获取到,哪怕只有一个,也是集合
3.通过类名来获取 - 方法 - document.getElementsByClassName('类名') - 获取到的也是集合
4.通过标签的name属性 - 方法 - document.getElementsByName('name属性的值')
5.通过css选择器来获取一个标签 - 方法 - document.querySelector('css选择器') - 获取到满足css选择器的第一个标签
6.通过css选择器来获取所有满足css选择器的标签们 - 方法 - document.querySelectorAll(css选择器)
关系获取:
获取所有子标签:父.chlidren
获取第一个子标签:父.firstElementChild
获取最后一个子标签:父.lastElementChild
获取父标签:子.parentElement
获取下一个兄弟标签:哥哥.nextElementSibling
获取上一个兄弟标签:弟弟.previousElementSibling
内容操作
获取文本内容 innerText
获取到的标签 . innerText
设置 标签.innerText = 值
操作纯文本 - 获取只能获取文本 / 设置标签不被解析
获取带标签的内容 innerHTML
获取到的标签 . innerHTML
设置 标签.innerHTML = 值
操作带标签的内容 - 获取连标签也能获取到 / 设置标签能被解析
表单元素内容:value
表单元素.value
表单元素.value = 值
设置类名 className
<style> .box{ width: 100px; height: 100px; border: 1px solid #000; } .red{ background-color: #f00; } </style> <body> <div class="box"></div> <button>按钮</button> </body> <script> var btn = document.querySelector('button'); var box = document.querySelector('.box'); btn.onclick = function() { // 给box设置类名 /* 标签.className = '类名' */ box.className = 'box red' // box.className = '' } </script>
类名设置dome
<style> ul{ list-style-type: none; padding: 0; margin: 0; } ul:after{ content: ''; display: block; clear: both; } ul li{ float:left; padding: 5px 10px; margin: 5px 10px; border: 1px solid #ccc; } ul li.active{ background-color: #f00; color: #fff; } </style> <ul> <li class="active">导航1</li> <li>导航2</li> <li>导航3</li> </ul> </body> <script> /* 获取标签 循环绑定事件 添加点击 将所有的li类名的清空 给当前点击的li添加类名active */ var lis = document.querySelectorAll('ul li'); for(i=0; i<lis.length; i++){ lis[i].onclick = function(){ for(j=0;j<lis.length;j++){ lis[j].className='' } this.className = 'active' } } </script>
设置样式
获取:window.getComputedStyle(标签) 返回所有css键值对组成的对象
语法:标签.style.css键 = 值(除了数字以外,所有的值都是字符串)
<style> .box{ width: 100px; height: 100px; background-color: #f00; } </style> <body> <div class="box"></div> <button>按钮</button> </body> <script> var btn = document.querySelector('button'); var box = document.querySelector('.box'); btn.onclick = function() { // 修改box的样式 // box.style.background-color = '#0f0' // box.style // box.style['background-color'] = '#0f0' box.style.width = '300px' // 在设置样式的时候,如果css键里面包含了连字符,可以将键包含的两个单词做小驼峰写法 // box.style.backgroundColor = '#0f0' // box['style'].backgroundColor = '#00f' box['style']['backgroundColor'] = '#00f' } console.log(window.getComputedStyle(box)); console.dir(window.getComputedStyle); </script>
属性操作
操作标签属性
设置属性
添加属性 - 标签.setAttribute(键, 值)
修改属性 - 标签.setAttribute(键, 值)
获取属性的值 - 标签.getAttribute(键)
删除属性 - 标签.removeAttribute(键)
利用属性操作设置样式
div.setAttribute('style','width:100px;height:100px;background-color:#0f0;')
利用属性操作设置类名
div.setAttribute('class', 'border')
获取到的标签其实都是对象,使用console.dir()可以输出对象的样子,既然是对象,就可以像对象一样进行属性操作
节点操作
1.创建节点 - document.createElement('标签名')
var div = document.createElement('div') console.log(div)
2.插入节点
将标签放到父标签的末尾作为子标签 - 父标签.appendChild(子标签-标签对象)
var b = document.createElement('b') b.innerText = '哈哈' // // 将b标签放到body中 document.body.appendChild(b)
将新标签放到某个已经存在的子标签的前面 - 父标签.insertBefore(新标签,已经存在的子标签)
var i = document.createElement('i') i.innerText = '嘿嘿' // // 把i标签放在b标签的前面 document.body.insertBefore(i, b)
3.替换节点 - 父标签.replaceChild(新标签,已经存在的子标签)
var s = document.createElement('s') s.innerText = '嘻嘻' // // 用s将i替换掉 document.body.replaceChild(s, i)
4.复制节点 - 标签.cloneNoed() - 默认只能复制空标签
// // var newB = b.cloneNode() //一般不用
// // 如果要讲标签内部的内容也复制出来,需要给cloneNode方法添加参数 - true var newB = b.cloneNode(true) console.log(newB); // console.dir(newB);
5.删除节点 - 父标签.removeChild(被删除的子标签)
document.body.removeChild(s)
节点dome
利用节点操作实现表格删除
<style> td:last-child{ background-color: #abcdef; } </style> </head> <body> <table border=1 width="500"> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成名绝技</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> </body> <script> var arr = [ { name:"令狐冲", age:20, sex:"男", skill:"独孤九剑" }, { name:"东方不败", age:50, sex:"女", skill:"葵花宝典" }, { name:"任我行", age:55, sex:"男", skill:"吸星大法" } ]; /* 获取tbody 循环遍历tr td 创建 tr 放入tbody中 td放入tr中 用函数包含循环,并调用 创建删除表格 遍历添加点击事件 */ var tbody = document.querySelector('tbody'); loadHTML() function loadHTML(){ for(i=0; i<arr.length;i++){ var obj = arr[i] var tr = document.createElement('tr'); tbody.appendChild(tr) var td = document.createElement('td') tr.appendChild(td) td.innerText = i+1 for(var j in obj){ var td = document.createElement('td') td.innerText = obj[j] tr.appendChild(td) } var td = document.createElement('td') td.innerText = '删除' tr.appendChild(td) } } var tds = document.querySelectorAll('td:last-child'); for(var k=0;k<tds.length;k++){ tds[k].onclick = function(){ tbody.removeChild(this.parentElement) } } </script>
获取元素(坐标、大小)
元素坐标
标签.offsetLeft
标签.offsetTop
获取到的是相对于设置过定位的父元素的位置
top是个关键字,代表window
<style> .big{ width: 300px; height: 300px; background-color: #f00; position: relative; } .small{ width: 100px; height: 100px; background-color: #00f; position:absolute; left: 100px; top: 100px; } </style> </head> <body> <div class="big"> <div class="small"></div> </div> <button>按钮</button> </body> <script> // 获取small的位置 var small = document.querySelector('.small') var left = small.offsetLeft var t = small.offsetTop console.log(left, t); document.querySelector('button').onclick = function(){ var timer = setInterval(function(){ var t = small.offsetTop // console.log(t); t += 2 if(t >= 400){ t = 400 clearInterval(timer) } small.style.top = t + 'px' }, 10) } </script>
元素大小
1.标签.clientWidth 标签.clientHeight - 获取到的是不包含表边框大小
var box = document.querySelector('.box') var w = box.clientWidth var h = box.clientHeight console.log(w,h);
2.标签.offsetWidth 标签.offsetHeight - 获取到的是包含边框的大小
var w = box.offsetWidth var h = box.offsetHeight console.log(w,h);
获取元素窗口大小
1.包含滚动条窗口大小
window.innerWidth
window.innerHeight
2.不包含滚动条的窗口大小
document.documentElement.clientWidth
document.documentElement.clientHeight
var w = document.documentElement.clientWidth
console.log(w);
var h = document.documentElement.clientHeight
console.log(h);
3.获取body大小
document.body.clientWidth
document.body.clientHeight
var w1 = document.body.clientWidth
var h1 = document.body.clientHeight
console.log(w1 ,h1);
获取滚动过的距离
有文档声明的写法
document.documentElement.scrollTop
document.documentElement.scrollLeft
没有文档声明的写法
document.body.scrollTop
document.body.scrollLeft
兼容写法
var t = document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollTop = document.body.scrollTop = 值
短路运算
短路运算就是一种赋值操作,只是其中有&&和||参与了。将连接的两个值经过判断选择其中一个赋值给变量
|| 或者,左边的数据会转成布尔值,根据或者来进行判断是否能得到true,如果左边是true,或者 连接的整体已经可以得到true,此时就会将第一个数据赋值给变量
如果左边是false,就会将第二个数据赋值给变量了
var a = 1 || 2 //1 var a = 0 || false //false var a = 1 && 2 //2 var a = 0 && 1 //0