回头再排版
DOM
节点层次:
Document类型
JavaScript 通过 Document 类型表示文档。在浏览器中, document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML 页面。而且, document 对象是 window 对象的一个属性,因此可以将其作为全局对象来访问。
1、文档子节点
可以使用document.documentElement属性,该属性始终指向HTML页面中<html>元素。另一个就是通过 childNodes 列表访问文档元素,但通过 documentElement 属性则能更快捷、更直接地访问该元素
两种方法:
document.documentElement;
document.childNodes[0];
document.firstChild;
输出结果是获取所有页面所有元素
<html>
<head>
</head>
<body>
<form>
ssss
</form>
</body>
</html>
document还有一个body属性可以直接指向html中<body>元素
var body = document.body;//取得对<body>的引用
所有浏览器都是支持document.documentElement;和document.body;这两个属性的。
2、文档信息
document.title;获取文档标题信息,可以修改这个标题信息:document.title = "这是一个测试";
document.URL;//取得完整的 URL
document.domain;//取得域名
document.referrer;//取得来源页面的 URL
3、查找元素
document.getElementById("");接收一个参数:要取得的元素的 ID。如果找到相应的元素则返回该元素,如果不存在带有相应 ID 的元素,则返回 null。
document.getElementsByTagName("");这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的 NodeList。
document.getElementsByName("");这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的 name 特性,
<html>
<head>
</head>
<script type="text/javascript">
function check(){
var color = document.getElementsByName("color");
for(var i = 0 ; i < color.length;i++){
if(color[i].checked){
console.log(color[i].value);
}
}
}
</script>
<body>
<form>
<fieldset>
<legend>Which color do you prefer?</legend>
<ul>
<li><input type="radio" value="red" name="color" id="colorRed" οnclick="check();">
<label for="colorRed">Red</label></li>
<li><input type="radio" value="green" name="color" id="colorGreen" οnclick="check();">
<label for="colorGreen">Green</label></li>
<li><input type="radio" value="blue" name="color" id="colorBlue" οnclick="check();">
<label for="colorBlue">Blue</label></li>
</ul>
</fieldset>
</form>
</body>
</html>
4、特殊集合
除了属性和方法, document 对象还有一些特殊的集合。这些集合都是 HTMLCollection 对象,为访问文档常用的部分提供了快捷方式,包括:
document.anchors,包含文档中所有带 name 特性的<a>元素;
document.applets,包含文档中所有的<applet>元素,因为不再推荐使用<applet>元素,所以这个集合已经不建议使用了;
document.forms,包含文档中所有的<form>元素,与 document.getElementsByTagName("form")得到的结果相同;
document.images,包含文档中所有的<img>元素,与 document.getElementsByTagName("img")得到的结果相同;
document.links,包含文档中所有带 href 特性的<a>元素
5、文档写入
document将输出流写入到网页中。
write(),writeln(),open()和close();
write()和writeln()方法都接收一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而writeln()则会在字符
串的末尾添加一个换行符(\n)。在页面被加载的过程中,可以使用这个两个方法向页面中动态地加入内容。
实例:
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<p>The current date and time is:
<script type="application/javascript">
document.write("<strong>"+(new Date()).toString()+"</strong>")
</script>
</p>
</form>
</body>
</html>
Element类型
Element 类型是使用 attributes 属性的唯一一个 DOM 节点类型。attributes 属性中包含一个NamedNodeMap,与 NodeList 类似,也是一个“动态”的集合。元素的每一个特性都由一个 Attr 节点表示,每个节点都保存在 NamedNodeMap 对象中。
getNamedItem(name):返回 nodeName 属性等于 name 的节点;
removeNamedItem(name):从列表中移除 nodeName 属性等于 name 的节点;
setNamedItem(node):向列表中添加节点,以节点的 nodeName 属性为索引;
item(pos):返回位于数字 pos 位置处的节点。
<html>
<head>
</head>
<script type="text/javascript">
</script>
<body>
<form>
<div id="myDiv" align="left" my_special_attribute="hello!"></div>
</form>
</body>
</html>
//获取div 元素
var div = document.getElementById("myDiv")
1、取得特性
div.getAttribute("id");
div.getAttribute("align");
div.getAttribute("my_special_attribute");
2、设置特性
div.setAttribute("id","test");
div.setAttribute("align","test");
div.setAttribute("my_special_attribute","test");
3、移除特性
div.removeAttribute("id");
4、attributes 属性
div.attributes.id.value;//myDiv
div.attributes.getNamedItem("id").nodeValue;//myDiv
div.attributes["id"].nodeValue;//myDiv
5、设置新的值
element.attributes["id"].nodeValue = "someOtherId";
6、删除特性
element.attributes.removeNamedItem("id");
7、创建元素
使用document.createElement()方法可以创建新元素
var userName = document.createElement("input");
添加属性
userName.setAttribute("id","userName");
userName.setAttribute("name","userName");
userName.setAttribute("value","liuwenlaing");
userName:<input id="userName" name="userName" value="liuwenlaing">
通过appendChild()、 insertBefore()或 replaceChild()把新元素添加到文档树中。
var div = document.getElementById("myDiv");
div.appendChild(userName);
div:
//<div id="myDiv" align="left" my_special_attribute="hello!"><input id="userName" name="userName" value="liuwenlaing"></div>
直接创建元素信息:
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div >");
8、元素的子节点
<html>
<head>
</head>
<body>
<form>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</form>
</body>
</html>
for(var i = 0 ; i < items.length;i++){
console.log(items[i]);
}
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
这里<ul>的后代中只包含直接子元素。不过,如果它包含更多层次的后代元素,那么各个层次中包含的<li>元素也都会返回。