<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Node类型</title>
</head>
<body>
<div id="items">
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</div>
<img class="item" name="name1" src="" alt=""/>
<img class="item" name="name2" src="" alt=""/>
<img class="item" name="name3" src="" alt=""/>
<img class="item" name="name4" src="" alt=""/>
<div id="myDiv" name="12" data-ss="sss" data-aa="aa"></div>
<script type="text/javascript">
//每个节点都有一个nodeType属性,用于表明节点类型
//由12个数值常量来表示
//任何节点类型必居其一
console.log("Node.ELEMENT_NODE:" + Node.ELEMENT_NODE);
console.log("Node.ATTRIBUTE_NODE:" + Node.ATTRIBUTE_NODE);
console.log("Node.TEXT_NODE:" + Node.TEXT_NODE);
console.log("Node.CDATA_SECTION_NODE:" + Node.CDATA_SECTION_NODE);
console.log("Node.ENTITY_REFERENCE_NODE:" + Node.ENTITY_REFERENCE_NODE);
console.log("Node.ENTITY_NODE:" + Node.ENTITY_NODE);
console.log("Node.PROCESSING_INSTRUCTION_NODE:" + Node.PROCESSING_INSTRUCTION_NODE);
console.log("Node.COMMENT_NODE:" + Node.COMMENT_NODE);
console.log("Node.DOCUMENT_NODE:" + Node.DOCUMENT_NODE);
console.log("Node.DOCUMENT_TYPE_NODE:" + Node.DOCUMENT_TYPE_NODE);
console.log("Node.DOCUMENT_FRAGMENT_NODE:" + Node.DOCUMENT_FRAGMENT_NODE);
console.log("Node.NOTATION_NODE:" + Node.NOTATION_NODE);
//每个节点都有一个ChildNodes属性，其中保存着NodeList对象,但是NodeList并不是一个Array的实例
function convertToArray(nodes) {
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0);//针对非ie浏览器
} catch (ex) {
array = new Array();
for (var i = 0; i < nodes.length; i++) {
array.push(nodes[i]);
}
}
return array;
}
var parent = document.getElementById("items");
var child = parent.childNodes;
var arr = convertToArray(child);
console.log(arr[0]);
console.log(arr[0].ownerDocument);
//appendChild(节点)，会把节点插入到childNodes中的最后一位。并返回回来
//insertBefore(要插入的节点,参照节点)，会把要插入的节点插入到参照节点的前一个位置上
//如果参照节点为Null时，则appendChild()和insertBefor()执行相同的操作
//replaceChild(要插入的节点,要替换的节点),要替换的节点由这个方法返回并从文档中移除，同时由要插入的节点占据其位置
//removeChild(要移除的节点)
//coloneNode(是否执行深复制)用于创建调用这个方法节点的一个完全相同的副本
//执行深复制：复制当前节点以及整个节点树；否：只复制节点本身
//这个副本归文档所有，但是没有父节点（是个”孤儿“节点）
//文档子节点
var html = document.documentElement;//取得对<html>的引用 所有浏览器都支持
console.log("document.documentElement:" + html);
console.log("html===document.childNodes[1]:" + (html === document.childNodes[1]).toString());
console.log("html===document.firstChild:" + (html === document.firstChild).toString());
var body = document.body;//取得对body的引用 所有浏览器都支持
console.log("body:" + body);
var doctype=document.doctype;
console.log("doctype:"+doctype);
var title=document.title;
console.log("title:"+document.title);
document.title="this is title!";
console.log("title:"+document.title);
//关于网页请求 URL domain referrer
var url=document.URL;
console.log("url:"+url);
var domain=document.domain;
console.log("domain:"+domain);
var referrer=document.referrer;
console.log("referrer:"+referrer);
//document.getElementById("id");
var img= document.getElementsByTagName("img");
//console.log(" img.namedItem(name1) :"+ img.namedItem("name1"));//取得name=name1的img
console.log("img[name1]"+img["name1"]);
//特殊集合
var a= document.anchors;//包含文档中所有带name特性的<a>元素
console.log("document.anchors:"+a);
var imgs=document.images;//返回文档中所有的img元素，与document.getElementByTagName("img") 相同
console.log("document.images:"+imgs);
var forms=document.forms;//包含文档中所有的form元素，与document.getElementByTagName("form") 相同
console.log("document.forms:"+forms);
var links=document.links;//包含文档中带有href特性的<a>元素
console.log("document.links:"+links);
//DOM一致性检测
var hasXmlDom=document.implementation.hasFeature("XML","1.0");
console.log("document.implementation.hasFeature('XML','1.0'):"+hasXmlDom);
//这个方法有的时候并不能准确的判断是否支持，所以最好除了检测hasFeature()之外，还同时使用能力检测
//Element类型
//nodeType 值是1
//nodeName 的值是元素的标签名 等同于tagName
//nodeValue 的值是null
//parentNode 的可能值是 Document或Element
var myDiv=document.getElementById("myDiv");
console.log("tagName:"+myDiv.tagName);
console.log("nodeName:"+myDiv.nodeName);
function outPutAttribute(element){
var array=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){
array.push(attrname+"=""+attrvalue+""");
}
}
return array.join(" ");
}
var attr=outPutAttribute(document.getElementById("myDiv"));
console.log("attr:"+attr);
//Text类型
//nodeType 的值是3
//nodeName 的值为#text
//nodeValue 值为节点包含的文本 data
//parentNode 是一个element
//没有（不支持）子节点
//Comment类型
//nodeType 的值为8
//nodeName 的值是#comment
//nodeValue 的值是注释的内容 data
//parentNode 是element或document
//没有（不支持）子节点
//CDATASection类型
//nodeType 的值为4
//nodeName 的值是#cdata-section
//nodeValue 的值是CDATA内的内容
//parentNode 是element或document
//没有（不支持）子节点
//DocumentType类型
//nodeType 的值为10
//nodeName 的值是doctype的名称
//nodeValue 的值是null
//parentNode 是Document
//没有（不支持）子节点
//Attr类型
//nodeType 的值为2
//nodeName 的值是特性的名称
//nodeValue 的值是特性的值
//parentNode 是null
//在HTML中没有（不支持）子节点
//Attr对象有3个属性:
//name 特性名称
//value 特性的值 nodeValue
//specified bool 用以区别特性是在代码中指定的还是默认的
//DOM操作技术
//动态脚本
function loadScript(url){
var script=document.createElement('script');
script.src=url;
script.type='text/script';
document.body.appendChild(script);
}
function LoadScriptString(code){
var script=document.createElement('script');
script.type='text/script';
try{
script.appendChild(document.createTextNode(code));
}catch(ex){
script.text=code;
}
document.body.appendChild(script);
}
LoadScriptString('window.onload=function(){alert(11)}');
//动态加载样式
function loadCssString(css){
var style=document.createElement('style');
style.type='text/css';
try{
style.appendChild(document.createTextNode(css));
}catch (ex){
style.stylesheet.cssText=css;
}
var head=document.getElementsByTagName('head')[0];
head.appendChild(style);
}
loadCssString('body{background:#f00;}');
</script>
</body>
</html>