js_document

1. document

我们常说的dom是指：document object model

1) Document的属性

document.title //设置文档标题等价于HTML的title标签

document.bgColor //设置页面背景色

document.fgColor //设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor //激活链接(焦点在此链接上)的颜色

document.vlinkColor //已点击过的链接颜色

document.URL //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性

document.fileSize //文件大小，只读属性

document.cookie //设置和读出cookie

document.charset //设置字符集 简体中文:gb2312

 

2) 常用方法

//动态向页面写入内容

document.write()

//创建一个html标签对象

document.createElement(Tag)

//获得指定ID值的对象

document.getElementById(ID)

//获得指定name值的对象数组（标签需要有name属性，如input标签，div标签是没有name属性的

document.getElementsByName(name)

//获得标签为name的对象数组

document.getElementsByTagName(name)

// 创建一个dom元素

document.createElement(tagname)

// 添加一个孩子元素

document.body.appendChild(oTag)

 

getElementById方法返回id为参数的标签对象，如果页面中id相同的标签有多个，则取么一个。如:

<input type="text" value="123" id="username"/>

<input type="text" value="456" id="username"/>

// id如果重了，只取第一个

document.write(document.getElementById("username").value);

输出：

 

 

getElementsByName方法返回所有标签的name属性为参数的标签。如：

<div name="desc">name为desc的标签</div>

<div name="desc">name为desc的标签2</div>

<div name="type">name为type的标签</div>

var descList = document.getElementsByName("desc");

document.write("getElementsByName('desc') length:"+descList.length);

for (var i = 0; i < descList.length; ++i)

{

document.write("<br />");

document.write(descList[i].innerHTML);

}

 

getElementsByTagName方法返回所有标签名称为参数的对象

var divList = document.getElementsByTagName("div");

document.write("getElementsByTagName('div') length:"+divList.length);

for (var i = 0; i < divList.length; ++i)

{

document.write("<br />");

document.write(divList[i].innerHTML);

}

输出所有标签为div的对象：

 

 

动态创建标签：

//document.createElement(tagName):创建一个元素

//appendChild(dom)

var divObj = document.createElement("div");

divObj.innerHTML = "<strong>我是一个动态创建的div哦！</strong>";

divObj.style.width = "220px";

divObj.style.height = "100px";

divObj.style.background = "#9F3";

divObj.style.border = "1px solid red";

divObj.style.marginTop = "100px";

document.body.appendChild(divObj);

 

 

3) 获取标签内容

①　非表单元素：

如div、p、a、span、label、table、tr、td、h2等：

innerHTML：获取带格式的文本（含子标签）

innerText：获取纯文本（只有内容，不含标签）

outerHTML：获取带格式的文本（含本标签和孩子标签）

outerText：获取纯文本

如：

<div id="isdiv">

div标签内容

<p>p标签内容</p>

</div>

alert("innerHTML:"+document.getElementById("isdiv").innerHTML);

alert("innerText:"+document.getElementById("isdiv").innerText);

alert("outerHTML:"+document.getElementById("isdiv").outerHTML);

alert("outerText:"+document.getElementById("isdiv").outerText);

 

 

 

②　表单元素

value：只有form元素才能使用value获取相应的值。

文本框：

var objDom = document.getElementById("XXXid");

var fieldValue = objDom.getAttribute("type");// 获取标签type

var tagName = objDom.tagName.toLowerCase();// 获取标签名称

if((tagName=="input" &&

(fieldValue=="text" || fieldValue=="password")) || tagName=="textarea"){

alert(objDom.value);

}

下拉框：

var objDom = document.getElementById("XXXid");

var fieldValue = objDom.getAttribute("type");// 获取标签type

var tagName = objDom.tagName.toLowerCase();// 获取标签名称

if(tagName=="select"){

var value = objDom.value;

var selectedIndex = objDom.selectedIndex;

var text = objDom.options[selectedIndex].text;

alert("value:"+value+"text:"+text);

}

单选/复选框：

var objDom = document.getElementsByName("XXXName");

var fieldValue = objDom[0].getAttribute("type");// 获取标签type

var tagName = objDom[0].tagName.toLowerCase();// 获取标签名称

if(tagName=="input" &&(fieldValue=="radio" || fieldValue=="checkbox")){

var arr = [];

for(var i=0;i<objDom.length;i++){

if(objDom[i].checked){

arr.push(objDom[i].value);

}

}

alert(arr.toString());

}

 

4) 获取/修改属性值

dom.getAttribute(key);//获取标签元素属性对应属性值

dom.setAttribute(key,value);//为标签元素添加属性和属性值

Key：属性、value：属性值。

如:(id,"tm_div") (type,"text") (name,"username")

<input type="text" id="usernameid" age="30" username="张三"/>

var inputDom = document.getElementById("usernameid");

// 修改id值

inputDom.setAttribute("id","newid");

var newInputDom = document.getElementById("newid");

document.write("id为newid标签的age："+newInputDom.getAttribute("age"));

输出：

 

又如，修改其他属性：

inputDom.setAttribute("age",20);

document.write("age改为20后age:"+inputDom.getAttribute("age"));

 

 

如果是元素自身由w3c提供元素属性是可以直接通过当前dom对象本身获取

如:

document.getElementById("username").id

document.getElementById("username").type

document.getElementById("username").name

document.getElementById("username").style

如：

var newInputDom = document.getElementById("newid");

// 直接使用.id

document.write(".id:"+newInputDom.id);

document.write("<br/>");

newInputDom.id="otherid";// 修改id值

document.write(".id=otherid后id:"+newInputDom.id);

document.write("<br/>");

输出：

 

 

5) 获取来访页面

//获取来访页面

alert(document.referrer);

上面的代码没有调通，可能是单词拼错，没有跑通。

此方法最常用的用途就是用来记录页面是从哪里点进来的，进行一个监控。

 

6) 获取当前页面中的焦点标签

// 还没有去测试过

alert(document.selection);

 

7) 获取孩子标签

获取body节点：var bodydom = document.body;

取元素的直接孩子节点：var elements = bodydom.childNodes;

如：

 

加上script元素一共有6个直接元素（div中的span不是直接子元素），所以最后输出12.因为每个元素算两个，一个标签一个值。

 

nodeName 属性含有某个节点的名称。

l 元素节点的 nodeName 是标签名称

l 属性节点的 nodeName 是属性名称

l 文本节点的 nodeName 永远是 #text

l 文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

 

节点类型取值(nodeType)	元素节点
1	元素element
2	属性attr
3	文本text
8	注释comments
9	文档document

 

上面的方法是获取所有孩子，其中标签内容也是孩子之一，下面使用另一种方法只获取孩子标签。Dom.children。

 

 

结果如下：

 

 

8) 获取父标签

var dom = document.body.chileNodes[0];

dom.parentNode;// == document.body;