getElementById()
getElementById()方法接收一个参数:要取得元素的ID，若找到相应元素则返回该元素，若不存在则返回null
【IE7-浏览器bug1】ID属性不区分大小写
<script>
var oBox = document.getElementById('Box');
console.log(oBox);//IE7-可以找到该元素，但其他浏览器都返回null
</script>
如果页面中多个元素的ID属性相同，则只返回文档中第一次出现的元素
<div class="box" id="box">2</div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.innerHTML);//1
</script>
【IE7-浏览器bug2】表单元素的name属性也会被当作ID属性识别出来。因此为了避免这种问题，最好不让表单元素的name属性和其他元素的ID属性相同
<div class="box" id="box">1</div>
<div class="box" id="box">2</div>
<script>
var oBox = document.getElementById('box');
console.log(oBox.innerHTML);//0
</script>
getElementsByTagName()
getElementsByTagName()该方法接收一个参数，即要取得元素的标签名，而返回的是包含0或多个元素的NodeList。在HTML文档中，这个方法会返回一个HTMLCollection对象，作为一个动态集合，该对象与NodeList非常类似。对于HTMLCollection对象而言，我们可以向方括号中传入数值或字符串形式的索引值。在后台，会对数值索引调用item()方法，对字符串索引调用namedItem()方法。HTMLCollection对象还有一个方法是namedItem()，可以通过元素的name特性或者直接用方括号来取得集合中的项。但safari和IE都不支持该方法。
<li class="in">1</li>
<li class="in">2</li>
<li class="in" name="in3">3</li>
</ul>
<script>
var oList = document.getElementById('list');
var aIn = oList.getElementsByTagName('li');
console.log(aIn.length);//3
console.log(aIn[0].innerHTML);//1
console.log(aIn.item(0).innerHTML);//1
console.log(aIn["in3"].innerHTML);//在safari和IE下报错，在其他浏览器下输出3
console.log(aIn.namedItem("in3").innerHTML);//在safari和IE下报错，在其他浏览器下输出3
要想取得所有的元素，可以向getElementsByTagName传入"*"，表示全部
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var aAll = document.getElementsByTagName('*');
//标准浏览器下结果为[html, head, meta, title, body, script]
//IE8-浏览器下结果为7个，由于它把<!DOCTYPE html>识别为注释，且把注释识别为元素，所以多1个
console.log(aAll);
</script>
</body>
</html>
在HTML中getElementsByTagName()里的元素不需要区分大小写，但在XML包括XHTML页面需要区分大小写
<script>
var aAll = document.getElementsByTagName('DIV')[0];
console.log(aAll.innerHTML);//所有浏览器都返回1
</script>
getElementsByName()
getElementsByName()该方法会返回带有给定name特性的所有元素，所有浏览器都支持。
最常用的是取得单选按钮。
<li class="in">
<input type="radio" value ="red" name ="color" id="colorRed">
<label for="colorRed">红色</label>
</li>
<li class="in">
<input type="radio" value ="blue" name ="color" id="colorBlue">
<label for="colorBlue">蓝色</label>
</li>
<li class="in">
<input type="radio" value ="green" name ="color" id="colorGreen">
<label for="colorGreen">绿色</label>
</li>
</ul>
<script>
var radios = document.getElementsByName('color');
console.log(radios.length)//3
</script>
getElementsByClassName()
getElementsByClassName()方法接收一个参数，即一个包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。传入多个类名时，类名的先后顺序不重要。(IE8-浏览器不支持)
<li class="in" >1</li>
<li class="in ab" >2</li>
<li class="in ab c">3</li>
</ul>
<script>
var oTest = document.getElementsByClassName('in ab');
console.log(oTest.length);//2
</script>
classList
在操作类名时，需要通过className属性添加、删除和替换类名。因为className是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。要从className字符串中删除一个类名，需要把类名拆开，删除不想要的那个，再重新拼成一个新字符串。(IE9-浏览器不支持)
<li class="in" >1</li>
<li class="in ab" >2</li>
<li class="in ab c">3</li>
</ul>
<script>
var oTest = document.getElementsByClassName('in ab')[1];
function removeClass(obj,str){
var classNames = obj.className.split(/\s+/);
var pos = -1;
for(var i = 0, len = classNames.length; i < len; i++){
if(classNames == str){
pos = i;
break;
}
};
classNames.splice(i,1);
obj.className = classNames.join(' ');
}
removeClass(oTest,'in');
console.log(oTest.className)//ab c
</script>
HTML5为所有元素添加了classList属性，这个classList属性是新集合类型DOMTokenList的实例，它有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用方括号法。此外，这个新类型还定义如下方法：
add(value):将给定的字符串值添加到列表中，如果值已存在，则不添加
contains(value):表示列表中是否存在给定的值，如果存在则返回true,否则返回false
remove(value):从列表中删除给定的字符串
toggle(value):如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
<li class="in" >1</li>
<li class="in ab" >2</li>
<li class="in ab c">3</li>
</ul>
<script>
var oTest = document.getElementsByTagName('li')[1];
console.log(oTest.classList);//JavaScript中关于隐式转换的一些总结 - andygo 阅读原文»
JavaScript运算符中的隐式转换规律：
一、递增递减运算符(前置、后置)
1.如果包含的是有效数字字符串或者是有效浮点数字符串，则会将字符串转换(Number())为数值，再进行加减操作，返回值的类型是：number类型。
2.如果不包含有效数字字符串，则会将字符串的值转换为NaN,返回值的类型是：number类型。
3.如果是boolean类型，则先会把true或者false转换为1或者0，再进行加减操作，返回值的类型是：number类型。
4.如果是null类型，则先会把null转换为0，在进行加减操作，返回值的类型是：number类型。
5.如果是undefined，则先会把undefined转换为NaN，再进行加减操作，返回值的类型是：number类型。
6.如果是对象，则先会通过对象的valueOf()方法，进行转换，如果返回的是NaN，调用toString()方法，在进行前面的操作，返回值的类型是：number类型。（注：空数组[]会返回0，在进行加减操作，空对象则会返回NaN）。
二、逻辑操作符中的隐式转换规律（注：只有undefined、null、NaN、0、空字符串会被转换为false，其余都为true）：
逻辑操作符一般用于语句判断中。通过判断结果返回的值进行后面的语句操作。
1.逻辑非(!)操作符：首先会通过Boolean()函数将其操作值转换为布尔值，然后求反。
2.逻辑与(&&)操作符：如果第一个值经过Boolean()函数转换后为true，则返回第二个操作值，否则返回第一个操作值。如果有一个操作值为null这返回null，如果有一个操作值为undefined，则返回undefined，如果有一个值为NaN，则返回NaN。
3.逻辑或(||)操作符：如果第一个值经过Boolean()函数转换为false，则返回第二个操作值，否则返回第一个操作值。
（注：逻辑操作符的运算为短路逻辑运算：前一个条件已经能够得出结果后续条件不再执行！）
三、关系操作符的隐式转换规律(关系操作符的操作值也可以是任意类型)：
1.如果两个操作值都是数值，则直接比较大小。
2.如果两个操作值都是字符串，则字符串进行其Unicode编码进行比较。
3.如果一个操作值是数值，则另一个值转换为数值进行比较。
4.如果一个操作值是对象，则调用对象的valueOf()和toString()方法，然后再进行上述比较。
5.如果一个操作值是布尔值，则将布尔值转换为数值再进行比较。
(注：NaN和任何值都不相等，包括自己，同时它与任何类型比较都会返回false。)
相等操作符==和===的隐式转换规律：
1.布尔值、字符串和数值进行比较，会先将其转换为数值再进行比较。
2.null和undefined比较是相等的，但不是全等的。
3.NaN与任何值都不相等，都会返回false。
本文链接：JavaScript中关于隐式转换的一些总结，转载请注明。
没有评论:
发表评论