dom
页面自动滚动
<div style="width: 50px;height:50px;border-radius: 50%;background: red;position: fixed;bottom: 300px;right: 300px; text-align: center;line-height: 50px;opacity: 0.5;">start</div>
<div style="width: 50px;height:50px;border-radius: 50%;background: red;position: fixed;bottom: 100px;right: 300px; text-align: center;line-height: 50px;opacity: 0.5;">stop</div>
<script type="text/javascript">
var start=document.getElementsByTagName('div')[0];
var stop=document.getElementsByTagName('div')[1];
var tiemr=0;
var key=true;
start.onclick=function (){
if(key){
timer= setInterval(function (){
window.scrollBy(0,10);
},100);
key=false;
}
}
stop.onclick=function (){
clearInterval(timer);
key=true;
}
</script>
轮播图
<style>
button{
border:2px solid red;
background: lightblue;
}
.wrapper div{
display:none;
border: 2px solid red;
width: 200px;
height:200px;
}
.active {
background: yellow;
}
</style>
</head>
<body>
<div class="wrapper">
<button class="active">first</button>
<button>two</button>
<button>three</button>
<div class="content" style="display: block">wang</div>
<div class="content">xing</div>
<div class="content">yu</div>
</div>
<script type="text/javascript">
var div=document.getElementsByClassName('content');
var btn=document.getElementsByTagName('button');
for(var i=0;i<btn.length;i++){
(function (n){
btn[n].onclick=function (){
for(var j=0;j<btn.length;j++){
div[j].style.display="none";
btn[j].className="";
}
this.className="active";
div[n].style.display="block";
}
}(i))
}
</script>
dom元素
DOM.classList.add("类名")
///元素节点
1.document代表整个文档
2.document.getElementByid()//元素id在ie8以下的浏览器,不区分id大小写,只匹配name属性的元素 Element节点不能用
3.getElementByTagName()//标签名 Element和document都能调用
4.getElementByName()//需注意,只有部分标签name可生效(表单 input img iframe)
5.getElementByClassName()//ie8和ie8以下的版本没有
6.querySelector()//css选择器 在ie7和ie7以下的版本没有
7.querySelectorAll()//css选择器 在ie7和ie7以下的版本没有
//Element节点的一些属性
1.innerHTML
2.innerText()火狐不兼容/textContent老版本 不好使
3.ele.setAttribute()
4.ele.getAttribute()
//节点的四个属性
1.nodeName 元素的标签名,大写形势表示只读
2.nodeValue Text/Comment节点的文本内容,可读写
3.nodeType 节点的类型,只读
4.attributes 节点的属性集
//节点的类型
1.元素节点-----1
2.属性节点-----2
3.文本节点-----3
4.注释节点-----8
5.docuemnt----9
6.DocuemntFragment---11
//遍历节点数
1.parentNode 父节点 (最顶端的为document)
2.childNodes 子节点们
3.firstChild 第一个子节点
4.lastChild 最后一个子节点
5.nextSibling后一个兄弟节点 previousSibling前一个兄弟节点
//基于元素节点的遍历
1.parentElement 返回当前元素的父元素节点(IE不兼容)
2.children 只返回当前元素的元素子节点
3.node.childElementCount==node.childen.length 当前元素节点的子元素节点个数(IE不兼容)
4.firstElementChild返回第一个元素节点
5.lastElementChild返回的是最后一个元素节点(IE不兼容)
6.nextElementSibling/previousElementSibling 返回后一个/前一个兄弟元素节点(IE不兼容)
//增
1.document.createElement();
2.document.createTextNode();
3.docuemnt.createComment();
4.docuemnt.createDocumentFragment()
//插
1.PARENTNODE.appendChild();;
2.PARENTNODE.insertBefore(a,b)
//删
1.parent.removeChild(); 相当于剪切
2.child.remove();
//替换
1.parent.replaceChild(new,origin);
//方法
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。
//查看滚动条滚动的距离 window.pageXOffset/pageYOffset(IE9以下不兼容) document.body.scrollLeft/top (ie8和ie8以下)+document.docuemntElement.scrollLeft
//查看视口的尺寸 window.innerWidth/innerHeight (IE8或者以下不兼容) document.docuemntElement.clientWidth/clientHeight //document.body.clientWidth/clientHeight
//查看元素的几何尺寸domEle.getBoundingClientRect(); 兼容性很好 返回的并不是实时的
//查看元素的尺寸 dom.offsetWidth dom.offsetHeight
//查看元素的位置 dom.offsetLeft dom.offsetTop 与父级的定位有关/
//让滚动条滚动 window.scroll(); window.scrollBy(); window.sccrollTo();
//读写css属性 dom.style.prop dom.style.cssFloat
//查询计算样式 window.getComputedStyle(ele,null)
//查询样式 ele.currentStyle
