周日 DOM和BOM
DOM (Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。 树节点;
获取子节点的两种方式,语法如下
父节点.children;children树形返回保存子元素的集合,是一个HTMLCollection对象,在返回节点包括元素节点和注释节点。
父节点。childNode;childNode中保存着一个NodeList对象。
节点的基本属性:nodeType,nodename,nodeValue。
nodeType属性,用于表明节点类型,节点类型由在Node类型中定义的数值常量来表示。
1--标签
2--属性
3--文本
要了解节点的具体信息,可以使用nodeName和nodeValue这两个属性。
节点.nodeName:获取标签节点的标签名
节点.nodeValue:获取文本节点的内容
获取父节点的方法:
元素.parentNode:属性指向文档树中的父节点。
元素.offsetParent:指向与当前元素最近的有定位属性的父级元素,如果没有定位的父级,则指向body。
操作节点
1.创建节点
document.createElement(‘标签名’):该方法接受一个字符串标签名,返回一个标签对象的引用。
document.createTextNode(‘文本’):该方法创建一段文本,返回文本对象的引用。
2.追加节点(父元素的末尾)
父元素.appendChild(子节点),用于父元素的末尾添加一个节点。
var oul=document.getElementsByTagName(“ul”)[0];
var cli=document.craeteElement(“li”);
cli.innerHTML="内容"
oul.appendChild(cli);
3.添加节点(某个元素之前)
父元素.insertBefore(要插入的节点,参考节点):该方法接受两个参数,要插入的节点和作为参照的节点,在插入节点后,被插入的节点会变成参照节点的前一个同胞节点,同时被方法返回。
Document
var o = document.getElementById('box');
document.getElementById('btn').onclick = function () {
var bt = document.createElement('button');//1.创建一个新的标签
bt.innerHTML = "按钮"//2.更改标签里的内容;
o.appendChild(bt)//3.用appendChild给追加到父元素下
}
4.删除节点
父元素.removeChild(被删除的元素):接受一个参数,即要移除的节点。
5.替换节点
父元素.replaceChild(新的节点,被替换的节点);该方法接受的是两个参数:要插入的节点和要被替换的节点。
6.获取和设置属性值(取定义属性的方法)
获取元素值:元素.getAttribute('属性名')
设置属性值:元素.setAttribute(‘属性名’,‘属性值’)
Document
var s=document.querySelector('img');
console.log( s.getAttribute('f'));
表格操作:
1.获取表格元素
DOM中提供了可以简便快速获取表格元素的属性,先获取到表格table对象,在通过table获取里面的元素,如获取thead-oTab.tHead、tfoot-oTab.tFoot、tbody-oTab.tBoodies、表格里的行toTab.rows。
2.案例:
Document
table {
width: 500px;
border-collapse: collapse;
margin-top: 50px;
}
学生信息表
用户名
年龄
地址
var btn = document.getElementsByTagName('button')[0];
var tb = document.getElementsByTagName('tbody')[0];
var ipt = document.getElementsByTagName('input');
// var t = document.getElementById('tb');//找到表格节点
// var tr = document.createElement("tr");
// var s = t.appendChild(tr)//创建一个tr节点
// var td1 = document.createElement('td');
// var td2 = document.createElement('td');
// var td3 = document.createElement('td');
// // var s2 = s.appendChild(td)
// var s3=s.appendChild(td)
// var s4=s.appendChild(td)
// console.log(s2);
btn.onclick = add;//1.给按钮添加点击事件
function add() {
var user = ipt[0].value;//2.取出值赋给td,此时,没有td,要创建td
var age = ipt[1].value;
var addr = ipt[2].value;
// console.log( ipt[0].value);//添加点击事件
if (user == "" || age == "" || addr == "") {
return;
}
create(user,age,addr)
ipt[0].value=ipt[1].value=ipt[2].value="";
}
function create(user, age, addr) {
var td1 = data(user);
var td2 = data(age);
var td3 = data(addr);
var tr = document.createElement('tr');
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tb.appendChild(tr);
}
//构造内容td
function data(cnt) {//3.由于我们要造三个td,所以可以创建一个函数,
var td = document.createElement('td')//1-1.创造一个td
td.innerHTML = cnt//1-2.将内容
return td;
}
案例2:
#form {
width: 480px;
margin: 30px auto;
border: 1px solid #eee;
border-radius: 5px;
padding: 10px;
line-height: 30px;
position: relative;
}
button {
position: absolute;
right: 10px;
bottom: 10px;
}
#tab {
width: 500px;
margin: 30px auto;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
padding: 5px;
}
tbody tr td:first-child {
text-align: center;
}
/*input[type] 属性选择器 选择input标签,并且有type属性input标签*/
/*input[type = "checkbox"] 选择有type属性并且值为checkbox的input标签*/
input[type="checkbox"] {
width: 15px;
height: 15px;
}
#div1 {
position: relative;
width: 480px;
padding: 10px;
margin: 0 auto;
}
请输入姓名:
请输入性别: 男 女
请输入年龄:
全选
姓名
性别
年龄
张三
女
88
李四
男
18
王五
女
1
var ipt1 = document.getElementById('name');
var ipt2 = document.getElementById('sex');
// var sex2 = document.getElementById('sex2');
var ipt3 = document.getElementById('age');
var tb = document.querySelector('#tab').tBodies[0];
// var trs=document.querySelectorAll('')
document.getElementsByTagName('button')[0].onclick = add;//添加
document.querySelector('#all').onchange=function(){
var str=tb.children;//找到所有的tr
for(i=0;i
str[i].children[0].children[0].checked=this.checked;
}
}
document.querySelectorAll('button')[1].onclick=function(){//删除
}
function add() {
var er = '
';//创建 var user = ipt1.value; //2.取出值赋给td,此时,没有td,要创建td
var sex = ipt2.checked?'男':'女';
var age = ipt3.value;;
// change(sex);
// console.log( ipt[0].value);//添加点击事件
if(ipt1.value==''||ipt3.value=='') return;
create( er,user, sex, age)
// ipt1.value = ipt3.value = "";
}
console.log(sex);
function create(er,user, sex, age) {
var td1 = data(er);
var td2 = data(user);
var td3 = data(sex);
var td4 = data(age);
var tr = document.createElement('tr');
// tr.appendChild(td0)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
tb.appendChild(tr);
}
//构造内容td
function data(cnt) { //3.由于我们要造三个td,所以可以创建一个函数,
var td = document.createElement('td') //1-1.创造一个td
td.innerHTML = cnt //1-2.将内容
return td;
}
补充找找元素的方法:
元素.querySelector
元素.querySelectorAll
Document
好
在
真的
不是的
BOM
BOM全称Browser Object Model-浏览器对象模型,他提供了很多对象,用于访问浏览器的功能,没有规范,BOM的核心是window。
三大弹出窗。
Document
var bt1=document.querySelector('button');
// bt1.onmouseenter=function(){
// alert('弹出')//弹出框
// prompt("输入框")//输入框
// confirm('警告框')//警告框
// }
bt1.onclick=function(){
// open()//打开一个空白窗口
open('http://www.baidu.com','_target')
}
open和close,打开和关闭窗口。
history对象,历史记录查询。
navigator对象,此对象的属性通常用于检测显示网页的浏览器类型
Document
console.log(navigator);
console.log(navigator.language);
console.log(navigator.appCodeName);//浏览器代号
console.log(navigator.appName);//浏览器名称
console.log(navigator.appVersion);//浏览器版本
body的位置属性;分为三组对比来记。
1.client系列
1)元素可视宽高
元素.clientWidth(width+左右的padding)
元素.clientHeight(height+上下的padding)
2)屏幕的可视宽高
document.documentElement.clientWidth
document.documentElement.clienHeight
3)元素边框
元素.clientTop:上边框的高度
元素.clientLeft:做边框的宽度
2.offset系列
1)获取与元素的占位宽高
元素.offsetWidth:width+padding+border
元素.offsetHeight:height+padding+border
2)获取元素在页面中的位置
元素.offsetTop:当前元素的顶部,定位到父元素的距离,没有定位父元素,到body的距离
元素.offsetLeft:当前元素的左边,到定位父元素的距离,没有定位父元素,到body的距离
3.scroll系列
1)滚动事件
window.onscroll:滚动条滚动的时候调用
2)屏幕滚动距离
document.documentElement.scrollTop:获取页面被卷去的高度;
document.body.scrollTop
3)元素的滚动
元素.scrollTop:被卷去的高
元素.scrollLeft:被卷去的宽
元素.scrollWidth:获取元素实际内容宽
元素.scrollHeight:获取元素的实际内容高
总结:
width:content 内容
clientWidth:padding+content 可视宽
offsetWidth:content+padding+border 占位宽
scrollWidth:内容的实际宽度
clientTop:border
offsetTop:相对于父元素之间的距离
scrollTop:被卷去的高度
document.documentElement.scrollTop||document.body.scrolllTop //所有浏览器的兼容写法,滚动条。
document.document.clientWidth 屏幕宽
实例:
Document
*{padding: 0;
margin: 0;}
div{
width: 100px;
height: 100px;
background-color: azure;
border: 10px solid lightblue ;
padding: 4px;
margin: 2px;
}
var o= document.querySelector('div')
console.log(o.offsetWidth);//获取元素的width和padding和border
console.log(o.offsetHeight);//获取元素height和padding和border
Document
div{
width: 400px;
height: 600px;
border:3px solid lemonchiffon;
overflow: scroll;
white-space: nowrap;
}
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
l俺么附近的女生的福尔法IE飞飞飞if纷纷扰扰不v if缝纫机房日方日发放日夫人能否
var o=document.querySelector('div');
console.log(o.scrollWidth);//获取元素的内容宽
console.log(o.scrollHeight);//获取元素的内容高
console.log(o.scrollTop);//被卷走的高度
懒加载:先只加载可视窗口区域的图片,当用户向下拖动滚动条时在继续加载后面的图片。这样做的好处是节约加载流量,减少加载时的线程数量,优化了用户体验。
懒加载实例:
Document
img {
width: 500px;
height: 400px;
}
_src="https://img10.360buyimg.com/imgzone/jfs/t1/113060/12/1418/185227/5e980a6dE5f25e04e/5ccdffc0b7a9e271.jpg">
_src="https://img10.360buyimg.com/imgzone/jfs/t1/95408/16/18803/242500/5e980a6dEb79fff73/b95a401fdaa46838.jpg">
_src="https://img10.360buyimg.com/imgzone/jfs/t1/113060/12/1418/185227/5e980a6dE5f25e04e/5ccdffc0b7a9e271.jpg">
_src="http://img10.360buyimg.com/imgzone/jfs/t1/26298/2/3140/95881/5c24a2a3Ec88bc8e7/31a622ea7e7f135a.jpg">
_src="http://img10.360buyimg.com/imgzone/jfs/t1/88385/4/14421/309252/5e65b6f1Ec8c72fb2/0969945cc3994b62.jpg">
_src="http://img10.360buyimg.com/imgzone/jfs/t1/102251/19/14425/221709/5e65b6c1Eab3d1427/278d241d878fc230.jpg">
_src="http://img10.360buyimg.com/imgzone/jfs/t1/104868/9/14544/76373/5e65b6c1E970d4f5c/e4a72c73c6d552a7.jpg">
_src="http://img10.360buyimg.com/imgzone/jfs/t1/45973/2/12795/633596/5d99867bE84169bb5/2287eb4a615c53cf.jpg">
_src="http://img30.360buyimg.com/popWareDetail/jfs/t1/118005/4/18300/111948/5f649374E790686f6/81a6fec05cd6e58c.jpg">
_src="http://img30.360buyimg.com/popWareDetail/jfs/t1/122120/40/13016/132812/5f649374E3548027d/d6db0daac30fcc09.jpg">
_src="http://img30.360buyimg.com/popWareDetail/jfs/t1/118886/1/18746/124561/5f649374Ee99bca2d/74cf607b335d1083.jpg">
var Img=document.querySelectorAll('img');
var clh=document.documentElement.clientHeight;
showImg();
function showImg(){
for(i=0;i
var oth=Img[i].offsetTop;//每张图片距离顶部的位置
var lit=document.documentElement.scrollTop||document.body.scrollTop;//卷去的可视区高度
if(oth<=lit+clh){
Img[i].src=Img[i].getAttribute('_src')
}
}
}
window.onscroll=function(){
showImg();
}
// var pics = document.querySelectorAll('img');
// var cHeight = document.documentElement.clientHeight;//屏幕可视的高度
// showImg();
// //遍历所有的图片,判断哪些图片应该显示
// // 图片距离顶部的距离<窗口可视高度+页面卷去的高度
// function showImg() {
// for (var i = 0; i < pics.length; i++) {
// var st = pics[i].offsetTop;//每个图片距离顶部的距离
// var t = document.documentElement.scrollTop || document.body.scrollTop;//页面卷去的高度
// if (st <= t + cHeight) {
// pics[i].src = pics[i].getAttribute('_src');//取出,赋值
// }
// }
// }
// window.onscroll = function () {
// showImg();
// };
回到顶部案例:
Document
div {
height: 1500px;
}
button {
position: fixed;
right: 15px;
bottom: 15px;
display: none;
}
var btn=document.querySelector('button');//找按钮
document.onscroll=function(){//给页面添加监听事件
var st=document.documentElement.scrollTop||document.body.scrollTop;//被卷去的高度
if(st>=500){
btn.style.display="block";
}else{
btn.style.display='none';
}
}
btn.onclick=function(){
var st=document.documentElement.scrollTop||document.body.scrollTop;
var t=setInterval(function(){
st-=10;//每次让卷出的高度减少10
if(st<=0){
clearInterval(t);
}
document.documentElement.scrollTop=st;//再把
},10)
}
// var btn = document.querySelector('button');
// //滚动
// document.onscroll = function () {
// var st = document.documentElement.scrollTop || document.body.scrollTop;//被卷去的高度
// if (st >= 500) {
// btn.style.display = 'block';
// } else {
// btn.style.display = 'none';
// }
// };
// document.querySelector('button').onclick = function () {
// var st = document.documentElement.scrollTop || document.body.scrollTop;
// var t=setInterval(function () {
// st -= 10;
// if(st<=0){
// clearInterval(t);
// }
// document.documentElement.scrollTop=st;
// }, 2);
// };
resize事件
当前屏幕发生变化的时候调用,会不间断的调用。
Document
alt="">
//窗口尺寸发生改变事件
function show() {
var Img = document.querySelector('img');
var clt = document.documentElement.clientWidth;//可视区域宽度
Img.style.width = clt + 'px';
}
show()
window.onresize = function () {
show();
}
// function show() {
// var img = document.querySelector('img');
// var w = document.documentElement.clientWidth;//可视区域宽度
// img.style.width = w + 'px';
// }
// show();
// window.onresize = function () {
// show();
// }
淘宝评价案例
Title
div {
width: 100%;
height: 100px;
margin-bottom: 20px;
background: pink;
}
#pingjia {
background: red;
margin: 0;
}
#pingjia.active {
position: fixed;
top: 0;
}
var dis = document.querySelector("#pingjia");
var ofT = dis.offsetTop;//目标元素距离顶部的位置
console.log(ofT);
var sH = document.documentElement.scrollHeight;
document.onscroll = function () {
var src = document.documentElement.scrollTop || document.body.scrollTop;//被卷走的高度
console.log(src);
if (ofT <= src) {
dis.className = 'active';
} else {
dis.className='';
}
}