1,DOM--Document object Model (文档对象模型)
2,节点属性:
(1)parentNode 返回父节点
(2)childNode 子节点集合
(3)firstChild 第一个子节点
(4)lastChild 最后一个子节点
(5)nextSibling 下一个节点
(6)previousSibling 上一个节点
3,使用上面的节点
<!DOCTYPE html> <html> <head> <title>javascript操作DOM对象</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=gbk"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript"> window.onload=function(){ var str=document.getElementById("first"); //返回父节点 var myparent=str.parentNode; alert(myparent); //返回子节点 //首先能力检测 查看浏览器内核引擎有没有某个属性 var str=document.getElementById("box"); var mychild=str.childNodes; for(var i=0;i< mychild.length;i++){ if(mychild[i].nodeType==1){ alert(mychild[i].innerHTML); } } //获得第一个子节点 var str=document.getElementById("box"); var my=str.firstElementChild; alert(my.innerHTML); //使用添加方法 添加一个p标签 var myp=document.createElement("p"); myp.innerText="我的同桌女的?"; var mydiv=document.getElementById("tt"); mydiv.appendChild(myp); //使用删除和替换方法 var mydiv=document.getElementById("box"); var man=mydiv.firstChild; mydiv.removeChild(man); }; </script> </head> <body id="tt"> <ul id="box"> <li id="first">吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul> </body> </html>
4,在 javascript 中添加样式
(1)需要添加样式的元素对象.style.样式=“样式值” 列如:
var mybox2=document.createElement("div"); // 添加的元素左浮动 mybox2.style.float="left";
(2)添加多个样式
mybox2.style.cssText="background-color:#D1E8FF;400px;height:300px;border:1px solid #91BDE9";
5,获取左外边距+获取元素高度+定位元素在要买呢中的位置
<!DOCTYPE html> <html> <head> <title>定位网页中的元素</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=gbk"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> *{ margin: 0px auto; padding: 0px; } #he{ 400px; height: 400px; border: 1px solid blue; position: relative; } #nei{ 200px; height: 200px; border: 1px dashed red; position: absolute; } </style> <script type="text/javascript"> window.onload=function(){ var myleft=document.getElementById("nei"); //使用offsetLeft 来获取里头盒子与外面盒子的左边距离 //要想实现上面的提示,记得把外面的里头的两个盒子设置成相对定位和绝对定位 var leftvalue=myleft.offsetLeft; alert(leftvalue); //获取元素高度clientHeight和offsetHeight //clientHeight获取到的是不加border边框厚度的元素高度 //offsetHeight:获取到的高度是包括border边框厚度 var height=myleft.clientHeight;//一种 var heightborder=myleft.offsetHeight;//第二种 alert(height+" "+heightborder);//查看两者 的区别 }; window.onscroll=function(){ //定位盒子 在我滚动鼠标的时候 盒子不改变位置 var height=document.documentElement.scrollTop||document.body.scrollTop; document.title=height;//在页面标题位置显示滚动条与页面上部的距离 var myhe=document.getElementById("he"); //获取你要定位的元素 myhe.style.cssText="margin-top:"+height+"px"; }; </script> </head> <body> <div id="he"> <div id="nei">二笔同桌</div> </div> </body> </html>