<body>
<style type="text/css">
.change { color: red;}
</style>
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr" my_special_attribute="hello!">Some text</div>
<input type="button" value="Get Values" onclick="getValues()">
<input type="button" value="Set Values" onclick="setValues()">
<p>Try clicking "Get Values", then "Set Values", then "Get Values" again.</p>
<script type="text/javascript">
var div = null;
function getValues(){
if (div == null) {
div = document.getElementById("myDiv");
}
console.log(div.getAttribute("id")); //"myDiv"
console.log(div.getAttribute("class")); //"bd"
console.log(div.getAttribute("title")); //"Body text"
console.log(div.getAttribute("lang")); //"en"
console.log(div.getAttribute("dir")); //"ltr"
console.log(div.getAttribute("my_special_attribute")); //"hello!"
}
function setValues(){
if (div == null) {
div = document.getElementById("myDiv");
}
div.setAttribute("id", "someOtherId");
div.setAttribute("class", "ft");
div.setAttribute("title", "Some other text");
div.setAttribute("lang","fr");
div.setAttribute("dir", "rtl");
div.setAttribute("class", "change");
}
</script>
</body><body>
<div id="myDiv" my_special_attribute="hello!" align="left">Some text</div>
<input type="button" value="Get Values" onclick="getValues()">
<p>Try clicking "Get Values".</p>
<script type="text/javascript">
var div = null;
function getValues(){
if (div == null) {
div = document.getElementById("myDiv");
}
console.log(div.id); //"myDiv"
console.log(div.my_special_attribute); //"hello!" (IE only)
console.log(div.align); //"left"
}
</script>
</body>遍历所有属性
<body>
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr" my_special_attribute="hello!">Some text</div>
<input type="button" value="Get Div Attributes" onclick="getDivAtts()">
<script type="text/javascript">
function outputAttributes(element){
var pairs = new Array(),
attrName,
attrValue,
i,
len;
for (i=0, len=element.attributes.length; i < len; i++){
attrName = element.attributes[i].nodeName;
attrValue = element.attributes[i].nodeValue;
pairs.push(attrName + "=\"" + attrValue + "\"");
}
return pairs.join(" ");
}
function getDivAtts(){
console.log(outputAttributes(document.getElementById("myDiv")));
}
</script>
</body>怪异的【childNodes】
<body>
<!-- ul的 li 全部在一行，就和一般认知一样，正常的！ -->
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
<input type="button" value="Count Child Nodes" onclick="countChildren()">
<script type="text/javascript">
function countChildren(){
var ul = document.getElementById("myList");
console.log(ul.childNodes.length); //3 in all browsers
console.log(ul.childNodes); //3 in all browsers
}
</script>
</body><body>
<!--ul的li每个占用一行，导致其元素个数增加 -->
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<input type="button" value="Count Child Nodes" onclick="countChildren()">
<script type="text/javascript">
function countChildren(){
var ul = document.getElementById("myList");
console.log(ul.childNodes.length); //3 in IE, 7 in others
console.log(ul.childNodes); //3 in IE, 7 in others
}
</script>
</body>