DOM(第二篇)
1、标签的内容
1.1 innerText和innerHTML属性都是用来获取和设置标签的内容的。
innerText:在获取的时候仅仅是内容,会丢弃html标签;在设置标签的内容的时候,会对标签进行转义。
innerHTML:在获取的时候仅仅是内容,还包括了html标签;在设置标签内容的时候,能够是识别html标签。
innerHTML和innerText在设置的时候,会覆盖原来的内容。
1.2 innerText的兼容性问题
在谷歌浏览器中:支持innerText和textContent;
在低版本的火狐浏览器不支持innerText属性,但是支持textContent属性;
在IE678中不支持textContent属性,但是支持innerText属性。
因此我们需要对此进行兼容性封装(这边只进行简单的浏览器兼容性封装)。
1.3 兼容性封装
function getInnerText(element){
if(typeof element.innerText==="string"){
//能力检测:检测浏览器有没有这个能力;
//说明支持innerText这个属性;
return element.innerText;
}else{
//不支持innerText属性,说明是低版本的火狐浏览器,用textContent
return element.textContent;
}
}
function setInnerText(element,content){
if(typeof element.innerText==="string"){
element.innerText=content;
}else{
element.textContent=content;
}
}
2、表单元素属性
2.1、disabled属性
标签中的disabled属性:在标签中,只要指定了disabled属性,无论有值无值,都代表这个input是被禁用的。
<input type="text" id="txt1" disabled/> 该文本框被禁用;
<input type="text" id="txt2"/> 该文本框可以正常使用;
DOM对象中的disabled属性:在DOM对象中,disabled的属性是一个布尔类型的属性,值只有true和false。
var tet = document.getElementById("txt");
txt.disabled=true;//该文本框被禁用
txt.disabled=false;//该文本框能正常使用
2.2、type属性
标签中的type属性:在标签中,type属性指定了input框的类型,常用的有:text、checkbox、button;
<input type="text"/><br/> //文本框
<input type="button" value="按钮" id=“btn”/> //按钮
DOM对象中的type属性:在DOM对象中,也有同样的type属性,这个type属性的取值和标签是一样的,是一个字符串。
var btn=document.getElementById("btn");
console.log(btn.type); //button;
2.3、value属性
标签的value属性:在标签中,value属性指定了input框的值。
<input type="text" value="12"/><br/>
<input type="button" value="禁用按钮" id="btn"/>
DOM对象中的value属性:在DOM对象中,也同样有value属性,我们可以通过DOM对象中的value属性来指定input框的值.
var btn =document.getElementById("btn");
console.log(btn.value); //打印出按钮中的值
btn.value="aa"; //修改按钮的值
2.4、selected属性
标签中的selected属性:在option标签中,只有指定了selected属性,说明这个option被选中。
<select name="" id="">
<option value="xm" id="xm">小米</option>
<option value="zs" selected>张三</option> //张三被选中了
<option value="ls">李四</option>
</select>
DOM对象中的selected属性:在DOM对象中,selected的属性是一个布尔类型的属性,值只有true和false。
var xm=document.getElementById("xm");
xm.selected=true; //该option被选中
xm.selected=false; //该option没被选中
2.5、checked属性
标签中checked属性:在标签中,只要指定了checked属性,说明这个checkbox被选中。
<input type="checkbox" id="ck" checked> //被选中了
DOM对象中dechecked属性:在DOM对象中,checked的属性是一个布尔类型的属性,值只有true和false。
var all =document.getElementById("ck");
all.checked=true;//该checkbox被选中;
all.checked=false;//该checkbox没被选中;
3、标签的自定义属性
3.1、标签的自定义属性
在html页面中,自定义一个属性为aa=“bb”;
<div id="box" aa="bb"></div>
在js代码中:
<script>
var box= document.getElementById("box");
console.log(box.id); //打印出box 可以用个DOM对象能能够获取到标签的固有属性;
console.log(box.aa); //打印出undefined 对于自定义的属性,无法通过DOM对象的属性来获取;
</script>
//但是,在 IE678中是可以获取得到的
3.2、getAttribute方法
语法:getAttribute(name):name属性名 作用是用来获取DOM对象对应的HTML标签的属性(包括自定义的属性和固定属性)。
//html 中有一个div
<div id="box" aa="bb"></div>
//js代码
var box=document.getElementById("box");
console.log(box.getAttribute("id")); //box
console.log(box.getAttribute("aa")) //bb
//注意:getAttribute获取的是标签中的属性,因为传递的参数就是标签中属性的名字,因为获取class属性传递的是class,而不是className
3.3、setAttribute方法
语法:setAttribute(name,value):name属性名 value:属性值
可以给标签设置属性(包括固有属性和自定义属性),并且能在html标签中显示出来。
<div id="box"></box>
<script>
var bar =document.getELementById("box");
box.setAttribute(aa,"bb"); //给html标签设置了一个aa="bb"的自定义属性
</script>
3.4、removeAttribute方法
语法:removeAttribute(name):name需要移除的属性名,方法用于移除标签的属性(包括自定义的属性和固有的属性)。
var box =document.getElemenetById("box");
box.removeAttribute("class"); //把class属性给移除掉了。
总结:对于标签的固有属性,通过DOM对象和attribute系列方法都可以进行设置和获取。对于标签的自定义属性,只能通过attribute系列方法来进行设置和获取。
4、节点
4.1、节点的属性
如何获取属性节点呢?
var box = document.getElementById("box");
box.getAttributeNode("id"); //获取到的是属性节点。
4.2、节点的层次
子级元素:
childNodes //子节点(包括元素节点和其他很多类型的节点);
children //子元素 虽然不是DOM标准中的方法,但是所有浏览器都兼容(使用比较多);
nextSibling //下一个兄弟节点;
nextElementSibling //下一个兄弟元素,有兼容性问题,需要进行封装;
previousSibling //上一个兄弟节点;
previousElementSibling //上一个兄弟元素,有兼容性问题,需要进行封装;
firstChild //第一个节点;
firstElementChild //第一个子元素,有兼容行问题,需要进行封装;
lastChild //最后一个节点;
lastElementChild //最后一个子元素,有兼容性问题,需要进行封装;
兼容性封装 :
1: function getNextElement(element){
if(element.nextElementSibling){
return element.nextElementSibling;
}else{
//只能先获取下一个兄弟节点
var node = element.nextSibling;
while(node && node.nodeType!=1){
node=node.nextSibling; //接着往后面找
}
return node;
}
}
2: function getPriviousElement(element){
if(element.previousElementSibling){
return element.previousElementSibling;
} else{
//只能先获取上一个兄弟节点
var node = element,previousSibling
while(node && node.nodeType!=1){
node=node.previousSibling; //接着往前面找
}
return node;
}
}
3: function getFirstChild(element){
if(element.firstElementChild){
return element.firstElementChild;
}else{
var node =element.firstChid;
while(node && node.nodeType!=1){
node=node.nextSibling;
}
return node;
}
}
4: function getLastChild(element){
if(element.lastElementChild){
return element.lastElementChild;
}else{
var node =element.lastChild;
while(node && node.nodeType!=1){
node=node.previousSibling
}
return node
}
}