node关系.png
node.png
<div id="id" class="bd" title="Body text" lang="en" dir="ltr" my_special_attribute="hello!">Some text</div>
文档对象模型
//document类型 即html页面
var html = document.documentElement; //html代码<html>...</html>
html = document.childNodes[0];
html = document.firstChild; //相同
document.body; // body 对象
document.doctype; //<!DOCTYPE html>
document.title; //文档标题 Title
document.url;
document.domain; //localhost
document.referrer; //'' 链接到当前页面的url
document.getElementById("id"); //页面元素的id
document.getElementsByTagName("div");//返回div的集合 eg: list.item(0) 或 list[0]
//HTMLDocument 类型才有的方法
document.getElementsByName("color") //name 属性的值 eg：name="color" 单选按钮
document.writeln("<small>"+document.domain+"</small>");
document.write("<small>"+document.domain+"</small>");
document.write("<script type=\"text\javascript\" >" +console.log(0)+
"<\/script>");
//文档加载结束后调用 document.write() 将会重写整个页面
window.onload = function () {
document.write("hello world"); //页面只有hello world
};
//Element 类型
var div = document.getElementById("id"); //页面元素的id
console.log(div.tagName); //DIV 在html中标签名始终以大写显示,在xml中标签名与源码中一致
console.log(div.nodeName); //DIV
if(div.tagName.toLowerCase()=="div"){
//执行某些操作
}
//获取属性
div.getAttribute("id"); //"id"
div.getAttribute("class"); //"bd"
div.getAttribute("title"); //"Body text"
div.getAttribute("lang"); //"en"
div.getAttribute("dir"); //"ltr"
div.getAttribute("my_special_attribute"); //"hello!" 自定义的属性名 (IE除外 div.my_special_attribute )
//获取属性
div.id; //"myDiv"
div.my_special_attribute; //"hello!" (IE only)
div.align; //"left"
//设置属性
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");
//完全移除属性
div.removeAttribute("dir");
//创建元素 参数为标签名
var newdiv = document.createElement("div");
newdiv.id="one";
newdiv.className="box";
div.appendChild(newdiv);
//通过html创建div
//var oldDiv = document.createElement("<div id=\'oldDiv\'></div>"); //报错？
//可以解决不能动态创建<iframe>元素的特性
//不能通过reset()方法重设方法动态创建的<input>元素
//动态创建的type特性值为"reset"的<button>元素重设不了表单
//Text类型:文本类型，不包含html代码
var element = document.createElement("div");
var textNode = document.createTextNode("Hello World!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(5);
console.log(newNode);
//Comment 类型 注释
var commentDiv = document.createElement("div");
var comm = document.createComment("A Comment");
commentDiv.appendChild(comm);
document.body.appendChild(commentDiv);
var comment = commentDiv.firstChild;
alert(comment.data);
//CDATASection类型 nodeType=4
//DocumentType类型 nodeType=10
//DocumentFragment类型 nodeType=11
//Attr类型 nodeType=11
var attr = document.createAttribute("align");
attr.value = "left";
alert(attr.value);
commentDiv.setAttributeNode(attr);
console.log(commentDiv.getAttributeNode("align").value);
console.log(commentDiv.attributes["align"].value)
DOM操作技术
//动态添加js
<input type="button" value="Add Script" onclick="addScript()">
<script type="text/javascript">
function loadScriptString(code){
var script = document.createElement("script");
script.type = "text/javascript";
try {
script.appendChild(document.createTextNode(code)); //ie中报错
} catch (ex){
script.text = code; //ie中执行
}
document.body.appendChild(script);
}
function addScript(){
loadScriptString("function sayHi(){alert('hi');}");
sayHi();
}
</script>
//动态添加样式
<input type="button" value="Add Style" onclick="addStyle()">
<script type="text/javascript">
function loadStyleString(css){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(css)); //ie中报错
} catch (ex){
style.styleSheet.cssText = css;//ie中执行
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style); //只能添加到head元素中
}
function addStyle(){
loadStyleString("body{background-color:red}");
}
</script>
