目录:
1、节点类型之Document类型
2、节点类型之Element类型
3、节点类型之Text类型
4、综合小示例 -- 动态添加外部样式文件
5、查找元素的扩展方法
接上篇,我们先来看常用的三种节点类型。
Document 类型
js通过Document类型表示文档。
在浏览器中,document对象是HTMLDocument(继承自Document类型) 的一个实例,表示整个HTML页面。
而且,document对象是window对象的一个属性,可以将其作为全局对象来访问。
1、访问子节点
有两个内置的访问其子节点的快捷方式,documentElement和childNodes
例子:
<html> <head> <title>Sample Page</title> </head> <body> <p>Hello world!</p> </body> </html>
这个页面经过浏览器解析后,其文档只包含一个子节点,即<html>元素。
// 访问文档子节点 documentElement 和 childNodes var html = document.documentElement; // 取得对 <html>的引用 alert(html === document.childNodes[0]); // true alert(html === document.firstChild); // true
另外还有个 body 属性,直接指向 <body>元素
var body=document.body;
2、访问文档信息
作为HTMLDocument的一个实例,document对象还有一些标准的Document对象没有的属性。这些属性提供了document对象所表现的网页的一些信息:title, URL, domain, referrer
// 文档信息: title, URL, domain, referrer var originalTitle = document.title; var url = document.URL; var domain = document.domain; var referrer = document.referrer;
3、查找元素
Document类型提供了两个方法 getElementById() 和 getElementByTagName()
根据Id取得元素 : getElementById(ID)
假设有div片段
<div id="myDiv">Some text</div>
可以用如下代码取得这个元素
var div = document.getElementById("myDiv"); // 取得 <div> 元素的引用
注意:
1、上面的参数大小写必须严格匹配。
2、如果页面中多个元素的ID值相同,getElementById()只返回文档中第一次出现的元素。
根据标签名取得元素 getElementsByTagName(标签名)
返回值:包含0或多个元素的NodeList,在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个“动态”集合,该对象与NodeList非常类似。
示例:取得页面中所有的<img>元素
// 取得页面中所有的 <img> 元素 var images = document.getElementsByTagName("img"); alert(images.length); //输出图像数量 alert(images[0].src); //输出第一个图像的 src 特性 alert(images.item(0).src); //输出第一个图像的 src 特性
Element 类型
这是我们最常接触的类型,HTML主体结构中所有标签都是这个类型。
要访问元素的标签名,可以使用nodeName属性,也可以使用tagName属性;这两个属性会返回相同的值。例子:
<div id="myDiv">Some text</div>
可以像下面这样取得这个元素及其标签名:
alert(div.tagName); //"DIV" alert(div.tagName == div.nodeName); //true
div.tagName输出的是 DIV 而非 div , 在HTML中,标签名始终以全部大写表示。
1、HTML元素
所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,也是通过它的子类型来表示。
HTMLElement类型直接继承自Element并添加了一些属性。
每个HTML元素都存在着下列标准特性。
id,元素在文档中的唯一标识符
title, 有关元素的附加说明信息,一般通过工具提示条显示出来
lang, 元素内容的语言代码,很少使用
dir, 语言的方向,值为 ltr 或 rtl ( l:left, t:to, r:right ), 很少使用
className, 与元素的class特性对应,即为元素指定的CSS类
例子:
<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr">Some text</div>
示例:通过js 取得标准特性值
var div = document.getElementById("myDiv"); alert(div.id); //"myDiv" alert(div.className); //"bd"
其他title, lang, dir取得方法类似
2、取得特性值
每个元素都有一或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。
操作特性的DOM方法主要有三个,分别是getAttribute()、setAttribute()和removeAttribute()。
接上面例子,获取特性值。
alert(div.getAttribute("id")); //"myDiv" alert(div.getAttribute("class")); //"bd"
通过getAttribute()方法也可以取得自定义特性
<div id="myDiv" data-geo=