让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>element类型</title>
</head>
<body>
<div id="myDiv" class="bdbd" my_special_attribute = 'nothing' lang="en" dir="ltr"></div>
<input type="button" id="btn" style="width: 100px; height:150px; background-color: red" value="点我"
onclick="showInSomething();">
<script>
function showInSomething() {
// alert('hello');
}
</script>
<ul id="myList">
<li>Item1</li>
<li>Item2
<ul>
<li>21</li>
<li>22</li>
</ul>
</li>
<li>Item3</li>
</ul>
<!--
IE中，这里<ul>有3个子节点，即3个<li>元素
其他浏览器，这里<ul>有7个子节点，3个<li>元素和4个文本节点
-->
<!-- IE和其他浏览器返回相同的<ul>元素的子节点 -->
<!-- <ul id="myList"><li>Item1</li><li>Item2</li><li>Item3</li></ul> -->
<script>
/*
Element类型用于表现XML或HTML元素，提供对元素标签名、子节点以及特性的访问
1, nodeType: 1
2, nodeName: 元素的标签名
3, nodeValue: null
4, parentNode: Document or Element
5, ownerDocument: null
6, 子节点可以是一个Element,Text,processingInstruction,CDATASection,Comment or EntityReference
// 得到这些子节点的过程是：
先获取相应的元素节点（例如document.getElementById('myDiv')），然后div.childNotes[位置]得到相应的子节点
访问元素的标签名： nodeName or tagName属性
一，HTML元素
二，取得特性
三，设置特性
四，attributes属性
五，创建元素
六，元素的子节点
*/
var div = document.getElementById('myDiv');
console.log(div);
console.log(div.childNodes);
console.log(div.hasChildNodes());
console.log(div.ownerDocument);
// console.log(div.nodeName); // DIV
// console.log(div.tagName); // DIV
// 在HTML中，标签名的输出始终是大写表示
// 在XML中，标签名的输出始终与源代码中的保持一致
// console.log(div.nodeName == div.tagName);
// 不确定脚本会在HTML或XML中运行时如下书写【推荐书写！！】
// if(div.tagName.toLowerCase() == 'div'){
// alert('yes');
// do something!
// }
// 一，HTML元素
// 所有HTML元素都由HTMLElement类型（继承自Element类型）表示，或者其子类型来表示
// 每个HTML元素都存在的标准特性：
// a, id
// b,title：有关元素的附加说明信息
// c,lang（很少使用）
// d,dir（很少使用）
// e,className
// var div = document.getElementById('myDiv');
// console.log(typeof div);
// console.log(div instanceof HTMLDivElement);
// console.log(div instanceof HTMLElement);
// console.log(div.id);
// console.log(div.lang);
// div.className = 'bdbd';
// div.dir = 'rtl';
// console.log(div.className);
// 每一种元素都有与之关联的类型，每一种类型都有与之相关的特性和方法
// 二，取得特性：getAttribute()方法
// 每个元素都有一或者多个特性，特性的用途为给出相应元素或其内容的附加信息
// 操作特性：getAttribute()， setAttribute(), removeAttribute()
// getAttribute()方法
// var div = document.getElementById('myDiv');
// console.log(div.getAttribute('id'));
// console.log(div.getAttribute('lang'));
// 传递给getAttribute()的特性名与实际的特性名相同
// 如果给定的特性不存在，getAttribute()则返回null
// console.log(div.getAttribute('class')); // null
// console.log(div.className); // 空字符串
// 通过getAttribute()也可以获得自定义特性的值
// var value = div.getAttribute('my_special_attribute');
// console.log(value);
// 这里的特性名不区分大小写，另外，根据HTML5的规范，自定义特性应该加上"data-"前缀以便验证
// console.log(div.getAttribute('CLASS'));
// 任何元素的所有特性（公认的特性，非自定义特性），也都可以通过DOM元素本身的属性来访问。
// console.log(div.id);
// console.log(div.my_special_attribute); // undefined（IE除外）
// 两类特殊属性：
// (1) style: getAttribute() --> CSS文本
// 属性访问 --> 对象
// var button = document.getElementById('btn');
// console.log(button.getAttribute('style'));
// console.log(button.style);
// (2) 事件处理程序：getAttribute() --> JavaScript代码字符串
// 属性访问 --> JavaScript函数
// console.log(button.getAttribute('onclick'));
// console.log(button.onclick);
// 【总结】 一般使用对象的属性进行DOM操作
// 在涉及自定义特性值时，才会使用getAttribute()
// 三，设置特性：setAttribute()
// (1)兩個參數：要设置的特征名和值
// "存在则覆盖，空则创建"
// var div = document.getElementById('myDiv');
// div.setAttribute('class','changed'); // 存在则覆盖
// div.setAttribute('title', 'fgfgf'); // 空则创建
// div.setAttribute('another_define_attribute','baba'); // 操作自定义特性
// 通过这个方法设置的特姓名都有被统一转换成小写形式
// (2) 对象属性赋值也可使设置特性的值，但不可以操作自定义特性，即该属性不会成为元素的特性
// div.className = 'thishi';
// div.mycolor = 'red';
// console.log(div.getAttribute('mycolor')); // null
// (3) removeAttribute()方法：彻底删除元素的特性（特性名及其特性值）
// 不常用！！
// 系列化DOM元素时，可以通过他来确切指定要包含哪些特性
// div.removeAttribute('my_special_attribute');
// 四，attributes属性
// Element类型是使用attributes属性的唯一的一个DOM节点类型，attributes属性中包含一个NamedNodeMap，与NodeList类似，是一个“动态”的集合
// 元素的每一个特性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中
// NamedNodeMap对象包含以下方法：
// a, getNamedItem(name)：返回nodeName属性等于name的节点
// b, removeNamedItem(name):从列表中删除nodeName属性等于name的节点
// c, setNamedItem(node)：向列表中添加节点，以节点的nodeName属性为索引
// d, item(pos): 返回位于数字pos位置处的节点
// (1)attributes属性中包含一系列节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值
// var div = document.getElementById('myDiv');
// console.log(div.attributes);
// console.log(div.attributes.length);
// // 等价书写----------
// console.log(div.attributes[1]);
// console.log(div.attributes['class']);
// var id = div.attributes.getNamedItem('id').value; // myDiv
// var id = div.attributes['id'].nodeValue;
// console.log(id);
// 设置特性的值
// div.attributes['class'].nodeValue = '123123';
// (2)removeNamedItem(name)
// 调用removeNamedItem(name)与在元素调用removeAttribute()方法的效果相同
// 唯一区别： removeNamedItem()返回表示被删除特性的Attr节点
// var oldAttr = div.attributes.removeNamedItem('class');
// var oldAttr = div.removeAttribute('class'); // undefined
// console.log(oldAttr);
// (3)setNamedItem(node)：【不常见！】
// var attr = document.createAttribute('align');
// div.attributes.setNamedItem(attr);
// 【注意】一般情况下，attributes属性加方法的这种用法比较少用
// 遍历元素的特性 ， attributes属性可以用的上！！
// 在需要将DOM结构序列化为XML or HTML字符串时，都是都会涉及遍历元素的特性
// 迭代元素的每一个特性，然后将他们构造成name="value", name="value"的字符串格式
function ouputAttributes(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;
if(element.attributes[i].specified){
// specified为true, 则意味着要么在HTML中指定了相应的特性，要么通过setAttribute()的方法设置了这个特性
// 在IE中，所有未经过设置的特性的该属性值都为false，而在其他浏览器中不会为这类特性生成对应的特性节点
pairs.push(attrName+ '=\"' + attrValue + '\"');
}
}
return pairs.join(' ');
}
// 五，创建元素
// (1)document.createElement()方法可以创建新元素。
// var div = document.createElement('div');
// console.log(div);
// 在使用createElement()方法创建新元素的同时，也为新元素设置了ownerDocument属性
// div.id = 'myNewDiv';
// div.className = 'jfdf';
// 以上操作并不会将该新建元素添加到文档树中
// (2) 新元素添加到appendChild(),insertBefore(),replaceChild()方法
// document.body.appendChild(div);
// IE中，使用另一种方法createElement(),为这个方法传入完整的元素标签,也可以包含属性
// var div = document.createElement('<div id=\"myNewDiv\"></div>');
// 六，元素的子节点
// 元素可以有任意数目的子节点和后代节点，因为元素可以是其他元素的子节点。
// 通过某个特定的标签名取得子节点或者后代节点？？ --> getElementByTagName()
// var ul = document.getElementById('myList');
// var items = ul.getElementsByTagName('li');
// console.log(items);
// 【注意】 这里的<ul>的后代中只包含直接子元素
// 如果他包含更多层次的后代元素，则各个层次中的<li>元素也会返回
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
