JS之DOM(二)
一、DOM节点的操作
1.增加:
(1). document.creatElement('标签名');创建元素节点
(2). document.creatTextNode('文本内容');创建文本节点
(3). document.creatComment('注释内容'); 创建注释节点
(4). document.DocumentFragment();添加文本碎片
2.插入
(1). dom.appendChild('domName'); 向Dom添加子节点
document.body.append('domName');向body下添加子节点
(2). Parent.insertBefore(a, b);/*insert a before b*/
3.删除
(1). Parent.removeChild('子节点标签名');剪切子节点,并返回
4.替换
(1). Parent.replaceChild(new, origin);用new 来替换orign,且orign返回
二、Element的一些属性
1. dom.innerHTML 返回dom的内容,返回类型为字符串,可读可写本
for(var i = 0; i < 3; i++){ div.innerHTML += '<span>i</span>'; }
2.dom.innerText(火狐不兼容)/dom.textContent(老版本IE不好用), 注意:影响操作赋值语句,会影响标签,修改覆盖
三、Element的一些方法
1.dom.setAttribute('特证名', '修改后内容');设置特征(包括自定义的);
div.setAttribute('id', 'demo');
2.dom.getAttribute('特证名');获取特征值
注意:JS改变样式,以改变class为优先选择
利用上述一、二、三的内容可以动态的向html文档添加内容
四、日期对象 Date()
1.计算机纪元时间:1970.1.1
五、计时器
1、setInterval(执行函数,间隔时间);每间隔设定时间,执行一次要求的函数
var i = 0; window.setInterval(function(){ i++; console.log(i); console.log(this);// => window,++ },1000 );
特点:(1).耗性能,执行时间有误差不准,(因为放入执行队列后不一定执行)
(2).setInterval()存在返回值
(3). 函数参数部分传入字符串(函数体)也可执行
setInterval('i++;console.log(i)',1000);
2.clearInterval(setInterval的返回值); 停止setInterval函数的执行
var i = 0; var timer = window.setInterval(function(){ i++; console.log(i); if(i == 10){ clearInterval(timer); } },1000 );// => 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
setInterval()返回值为该方法第几次定义的数字;
3.setTimeout(function(){},time);//间隔time后执行该函数一次
4.learTimeout();终止setTimeout
六、DOM基本操作
1.查看滚动条的滚动距离
(1)window.pageXOffset/pageYOffset
横轴和竖轴
IE8及IE8以下不兼容
(2)a. document.body.scrollTop/document.body.scrollLeft
b. document.documentElement.scrollTop/document.documentElement.scrollLeft;
任何一个浏览器a和b两种方法必有一个不能用,无值,所以:两种方法求和即可解决这种问题
(3)封装结局兼容和第二个问题
function getScrollOffset() { if(window.pageXOffset) { return { w: window.pageXOffset, h: window.pageYOffset } } var dis = { w: document.body.scrollLeft + document.documentElement.scrollLeft, h:document.body.scrollTop + document.documentElement.scrollTop; } }
2. (1)window.innerWidth/window.innerHight,可视区域宽高,IE8及IE8以下不兼容
(2)标准模式下:document.documentElement.clientWidth/document.documentElement.clientHeight
(3)怪异模式下:document.body.clientWidth/document.body.clientHeight
(怪异模式下,老版本语法规则兼容,方法:将上方<!DOCTYPE html>去掉)
document.compatMode 在控制台查看是否为怪异模式,返回'BackCompat',则为怪异模式,返回'CSS1Compat',则为非怪异模式
(4)可视区封装域宽高,解决兼容和不同模式下问题
function setViewportOffset() { if(window.innerWidth){ return { w: window.innerWidth, h: window.innerHeight } } if(document.compatMode == 'BackCompat'){ return{ w: document.body.clientWidth, h: document.body.clientHeight } }else { return { w: document.documentElement.clientwidth, h: ocument.documentElement.clientHeight } } }
3.查看元素尺寸
(1)elementNode.getBoundingClientRect();
返回的left和top,为左上角坐标,right和bottom为右下角坐标,相对浏览器;
height和width在老版本并未实现
返回结果为一个对象且非实时
(2)封装,解决老版本不兼容问题
Element.prototype.getElementOffset = function(){ var objData = this.getBoundingClientRect(); if(objData.width) { return { w: objData.width, h: objData.height } }else{ return { w: objData.right - objData.left, h: objData.top - objData.bottom } } }
(3)elementNode.offsetWidth/offsetHeight/offsetLeft/offsetTop/,查看该元素宽高
dom.offsetLeft/offsetTop 对于无定位父级的元素,返回相对整个文档的坐标,对于有定位父级的元素,返回相对于最近定位父级元素的坐标
offsetParent 返回最近的定位的父级,body调用返回null
(4)封装获得返回元素右下角相对于浏览器原点的坐标
Element.prototype.getScrollOffset = function () { if(!this.offsetParent){ return{ w: this.offsetWidth, h: this.offsetHeigth } } var width = this.offsetWidth, height = this.offsetHeight, tar = this; while(tar.offsetParent != null){ tar = tar.offsetParent; width += this.offsetWidth; height += this.offsetHeight; } return { w: width + tar.offsetWidth, h: height + tar.offsetHeight } }
4.让滚动条滚动
1.scrollTo(x,y);滚动到x,y的距离,每次都相对于浏览器原点
2.scroll(x,y);和 1方法同
3.scrollBy();滚动到x,y的位置,每次都相对于当前滚动条的位置,之前数据累加