和我一起学习DOM(第二篇)
标签：
JavaScript
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，而不是className3.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
}
}点击查看更多内容
1人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦