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

 

posted @ 2020-03-08 13:55  尚宇园  阅读(147)  评论(0编辑  收藏  举报