Dom编程
概念
dom: document object model 文档对象模型
DOM技术:
php里边有:php语言 与 xml/html标签之间沟通的一个桥梁。
javascript里边有:js语言 与 html/xml标签之间沟通的一个桥梁。
为了方便javascript语言通过dom操作html比较方便,
把html标签的内容划分为各种节点:
文档节点(document)
元素节点
文本节点
属性节点
注释节点
dom就是学习利用javascript如何实现对html标签内容的增、删、改、查等操作
获取元素节点
具体操作方法:
document.getElementById(id属性值);
document.getElementsByTagName(tag标签名称);
document.getElementsByName(name属性值);不推荐,有浏览器兼容问题,通常应用在form表单里边。
案例一:
<html> <body> <h2>获取元素节点</h2> <input type="text" id="username" value="tom" /><br /> <input type="text" id="useremail" value="tom@163.com" /><br /> </body> </html> <script type="text/javascript"> //① document.getElementById(); id属性值获得元素节点 var name = document.getElementById('username'); console.log(name); var email = document.getElementById('useremail'); console.log(email); </script> |
案例二:
<script type="text/javascript"> //② document.getElementsByTagName(tag标签名); tag标签名称获得元素节点 var hh = document.getElementsByTagName('h2'); console.log(hh);//HTMLCollection[h2] //通过 getElementsByTagName 收集的元素节点以"集合/数组"(即时只有一个节点)的形式返回 console.log(hh[0]);
var its = document.getElementsByTagName('input'); console.log(its);//HTMLCollection[input#username 属性(attribute)值 = "tom", input#useremail 属性(attribute)值 = "tom@163.com"] console.log(its[1]);//访问具体节点 console.log(its.item(0));//访问具体节点 </script> |
案例三:
<body> <h2>获取元素节点</h2> <input type="text" name="username" value="tom" /><br /> <input type="text" name="useremail" value="tom@163.com" /><br /> <div>today is very good</div> </body> </html> <script type="text/javascript"> //③ document.getElementsByName(name属性值); name属性值获得元素节点 //通过 getElementsByTagName 收集的元素节点以"集合/数组"(即时只有一个节点)的形式返回 var it = document.getElementsByName('username'); console.log(it); //NodeList[input 属性(attribute)值 = "tom"]
console.log(it[0]);//<input type="text" value="tom" name="username"> console.log(it.item(0));//<input type="text" value="tom" name="username"> </script> |
获取文本节点
<div>hello</div>
需要借助div元素节点再获得其内部的文本节点.
var dvnode = document.getElementsByTagName(‘div’)[0];
dvnode.firstChild; //(或调用lastChild)获得元素div内部的第一个子节点对象
<body> <h2>文本节点获取</h2> <input type="text" name="username" value="tom" /><br /> <input type="text" name="useremail" value="tom@163.com" /><br /> <div>today is very good</div> </body> </html> <script type="text/javascript"> //获得div内部的文本节点 var dv = document.getElementsByTagName('div')[0]; //firstChild获得第一个子节点/lastChild获得最后一个子节点 console.log(dv.firstChild);//<TextNode textContent="today is very good"> console.log(dv.firstChild.nodeType);//3 console.log(dv.firstChild.wholeText);//today is very good //获得文本信息 </script> |
兄弟节点
firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息
以上属性在主流浏览器(火狐firefox、chrome、safari、opera)中会给考虑空白节点。在IE浏览器中不考虑。
<body> <h2>兄弟节点获取</h2> <ul> <li>red</li> <li>blue</li> <li>green</li> </ul> </body> </html> <script type="text/javascript"> var ull=document.getElementsByTagName('ul').item(0); console.log(ull.childNodes); console.log(ull.childNodes.length);//7 console.log(ull.firstChild);//#text console.log(ull.firstChild.nextSibling);//<li>red</li> console.log(ull.lastChild);//#text console.log(ull.lastChild.previousSibling);//<li>green</li> </script> |
父节点
.parentNode
<body> <h2>兄弟节点获取</h2> <ul> <li>red</li> <li>blue</li> <li>green</li> </ul> </body> </html> <script type="text/javascript"> var blue=document.getElementsByTagName('li')[1]; console.log(blue.parentNode);//ul console.log(blue.parentNode.parentNode);//body console.log(blue.parentNode.parentNode.parentNode);//html console.log(blue.parentNode.parentNode.parentNode.parentNode);//htmldocument console.log(blue.parentNode.parentNode.parentNode.parentNode.parentNode);//null </script> |
属性值操作
<input type=”text” name=”username” value=”tom” class=”orange” />
<a href=”http://www.baidu.com” addr=’beijing’ target=”_blank”>百度</a>
① 获取属性值
itnode.属性名称; //只能操作w3c规定的属性
itnode.getAttribute(属性名称); //规定的 和 自定义的都可以获取
② 设置属性值
itnode.属性名称 = 值; //只能操作w3c规定的属性
itnode.setAttribute(名称,值); //规定的 和 自定义的都可以设置
<body> <h2>属性值操作</h2> <a href="http://www.baidu.com" addr='beijing' target="_blank" class="apple">百度</a><br /> <input type="button" value="修改属性" οnclick="f1()" /><br /> </body> </html> <script type="text/javascript"> var baidu = document.getElementsByTagName('a')[0]; //① 获得属性的信息 console.log(baidu.href); console.log(baidu.target); console.log(baidu.className);//apple /className是class的一个别名,不可以直接访问class属性 console.log(baidu.addr);//undefined console.log(baidu.getAttribute('href'));//http://www.baidu.com console.log(baidu.getAttribute('addr'));//beijing console.log(baidu.getAttribute('target'));//_blank
//② 设置属性的信息 function f1(){ baidu.href = "http://www.163.com"; baidu.target = "_self"; baidu.addr = "tianjin"; //属性修改有就更新、没有就创建 baidu.setAttribute('addr','shanghai'); baidu.setAttribute('height','170');//新创建 } </script> |
属性节点的获取
var attrlist = itnode.attributes; //返回对应节点内部的全部属性信息,数组列表形式返回
attrlist.属性名称; //获得具体属性节点
获得节点类型nodeType:
1------> 元素节点
2------> 属性节点
3------> 文本节点
9------> 文档节点
<body> <h2>属性节点获取</h2> <input type="text" name="username" value="tom" class="orange" id="username" /><br /> <!--sldjlsjdoks--> <input type="button" value="修改属性" οnclick="f1()" /><br /> </body> </html> <script type="text/javascript"> var name = document.getElementById('username'); var attrs = name.attributes;//把name元素节点对象的全部属性以"数组"形式给返回出来 console.log(attrs);//[type="text", id="username", class="orange", value="tom", name="username"] console.log(attrs.id); //获得id"属性节点" id="username" console.log(attrs.class); //获得id"属性节点" class="orange" console.log(attrs.class.nodeType); //2 console.log(name.nodeType); //1 //节点.nodeType:判断节点类型 1->元素节点 2->属性节点 3->文本节点 9->document节点 </script> |
节点的创建和追加
节点创建
元素节点:document.createElement(tag标签名称);
文本节点:document.createTextNode(文本内容);
属性设置:node.setAttribute(名称,值);
节点追加:
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
<body> <h2>节点创建和追加</h2> </body> </html> <script type="text/javascript"> /** <ul> <li mean="热情">red</li> <li mean="冷静">blue</li> <li mean="生机">green</li> </ul> */ var color = ['red','blue','green']; var color_mean = ['热情','冷静','生机']; //创建各种节点 var ull = document.createElement('ul'); for(var k in color){ var lii = document.createElement('li'); lii.setAttribute('mean',color_mean[k]); var txt = document.createTextNode(color[k]);
//节点追加 lii.appendChild(txt); ull.appendChild(lii); } //document.getElementsByTagName('body')[0].appendChild(ull); document.body.appendChild(ull); </script> |
节点复制操作
被复制节点.cloneNode(true/false);
true:深层复制
false:浅层复制
<div id=”apple”>hello</div>
<body> <h2>节点复制追加</h2> <ul> <li mean="热情">red</li> <li mean="冷静">blue</li> <li mean="生机">green</li> </ul> <ul> <li mean="饿">orange</li> </ul> </body> </html> <script type="text/javascript"> var blue = document.getElementsByTagName('li')[1]; var fu_blue = blue.cloneNode(true);//深层复制(本身和内部子节点都复制) var fu_blue = blue.cloneNode(false);//浅层复制(本身(包括属性)节点给复制)
//把复制的fu_blue追加到第二个ul里边 var second_ul = document.getElementsByTagName('ul')[1]; second_ul.appendChild(fu_blue); </script> |
节点删除
父节点.removeChild(子节点);
<body> <h2>节点删除操作</h2> <ul> <li mean="热情">red</li> <li mean="冷静">blue</li> <li mean="生机">green</li> </ul> <ul> <li mean="饿">orange</li> </ul> </body> </html> <script type="text/javascript"> //删除green节点 var green = document.getElementsByTagName('li')[2]; var red = document.getElementsByTagName('li')[0]; green.parentNode.removeChild(green); red.parentNode.removeChild(red); </script> |
dom操作css属性
<div style=”width:300px; height:200px;background-color:pink;”></div>
① 获取css样式
元素节点.style.css样式名称;
divnode.style.width; //获取宽度样式
② 设置css样式(有则修改、没有则添加)
元素节点.style.css样式名称 = 值;
divnode.style.width =‘500px’;设置div宽度样式
注意:
① dom操作css样式只能操作“行内样式”(css样式分为 行内、内部、外部)
② 操作属性样式例如background-color/border-left-color,
需要变为backgroundColor、borderLeftColor,中恒线去掉,后边首字母大写。
<body> <h2>操作css样式</h2> <div style="width:300px; height:200px; background-color:lightblue;">利用dom操作css</div> <input type="button" value="获取css" οnclick="f1()" /><br /> <input type="button" value="设置css" οnclick="f2()" /><br /> </body> </html> <script type="text/javascript"> var dv = document.getElementsByTagName('div')[0]; function f1(){ //获取 console.log(dv.style.width);//300px; console.log(dv.style.height);//200px console.log(dv.style.backgroundColor);//lightblue } function f2(){ //设置(有则更新,没有就创建) dv.style.color = "red"; dv.style.backgroundColor = "lightgreen"; dv.style.width = "600px"; } </script> |