( 一 )HTML 元素的类型
所有的HTML 元素都是 HTMLElement 类型。(HTMLElement 类型 继承 自Element类型)
HTMLElement 类型 有很多子类型,如 HTMLHtmlElement, HTMLDivElement,等等。
每一个HTML 元素 都是通过 `子类型` 实例化的。
来个测试
<div id='"myDiv"></div> <script> var div = document.getElmentById("mydiv"); alert(div.constructor) // function HTMLDivElement () { [native code] } </script>
每一个元素都有 id, class,title,lang,dir 属性.
简单得查看查一元素的类型,以及属性的函数:
function lookTagArr(tagname){ var tag = document.getElementsByTagName(tagname)[0]; document.write(tag.nodeName);//打印元素的名称(返回大写的元素名称!) document.write(tag.constructor);//打印 元素的 类型(构造器函数) document.write(Object.keys(tag));//打印出元素的所有可迭代属性 }
( 二 ) 获取,与操作 HTML 元素的特性
主要有三个方法; getAttribute(),setAttribute,removeAttribute(), HTML元素的特性名称不区别大小写。
var div = document.getElementById("myDiv"); alert(div.getAttribute("id")); //"myDiv" alert(div.getAttribute("class")); //"bd" alert(div.getAttribute("title")); //"Body text" alert(div.getAttribute("lang")); //"en" alert(div.getAttribute("dir")); //"ltr"
不存在,getAttribute()返回null。
( 附:这里顺便说一下,当属性名与javascript 关键字相冲突的疑惑:如果属性名与javascript 关键字相冲突,除于 class 特性名,对应 className 属性之外,其它有冲突的 对象特性名,对应的属性名为; html+属性名例如 <lable for="" ><lable>
<label for='a' label> <script> var f = document.getElementsByTagName('label')[0].htmlFor; //与javascript 关键字有冲突的 for 特性名,对应 htmlFor 属性 alert(f); </script>
所有公认的标准的元素特性,都可以通过"元素.(点)特性" 的形式访问,操作;
对于自定义特性,有些浏览器并不包括在元素属性中, “元素.(点)特性” ,返回值为 undefined.
举例说明:
<div id="myDiv" align="left" my_special_attribute="hello!"></div> alert(div.id); //"myDiv" alert(div.my_special_attribute); //自定义特性,undefined。(IE 除外) alert(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.id = "someOtherId"; div.align = "left";
div.mycolor = "red"; alert(div.getAttribute("mycolor")); //null(IE 除外)
再说一下,移动元素特性,removeAttribute(),这个方法会删除掉 HTML元素的特性的值,还有属性本身。(IE5 及更老的版不支持此方法)
(三) attributes 属性
Element 类型 是使用attributes 属性的 唯一类型。 attributes 中 包含 一个NamedNodeMap,与Nodelist一样,是一个动态的集合,元素的每一个特性,用Attr类型的节点表示,每一个节点都存储在NamedNodeMap 集合对象中,NamedNodeMap 对象有以下方法:
getNamedItem(name),removeNamedItem(name),setNamedItem,item(pos),
attributes 属性中包含一系列节点,每个节点的nodeName 就是特性的名称,而节点的nodeValue就是特性的值。要取得元素的id 特性,可以使用以下代码
var id = element.attributes.getNamedItem("id").nodeValue;也可以通过通过属性的形式:
var id = element.attributes["id"].nodeValue;
element.attributes["id"].nodeValue = "someid";
但是 arrtibutes 属性 也是有用的,特别是你在 要遍历HTML 元素特性的时候
再说说移除元素特性的两种方法的不同,
调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果相同——直接删
除具有给定名称的特性。下面的例子展示了两个方法间唯一的区别,即removeNamedItem()返回表示
被删除特性的Attr 节点。
(五) 创建html元素
使用document.createElement()方法可以创建新元素。这个方法只接受一个参数,即要创建元素的标签名。这个标签名在HTML 文档中不区分大小写,而在XML(包括XHTML)文档中,则是区分大小写的。例如,使用下面的代码可以创建一个<div>元素。
var div = document.createElement("div")
div.id = "myNewDiv"; div.className = "box";
document.body.appendChild('div');
(六) 元素的子节点
element.childNodes, 返回 NodeList 对象,不同的浏览器 处理Element 子节点不同,例如在IE 中 空行也是一个节点。
<ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul >
为了兼容浏览器间的这一差别。这意味着在执行某项操作以前,通常都要先检查
一下nodeTpye 属性,如下面的例子所示。
for(var i = 0;i<element.childNodes.length;i++) { if(element.childNodes[i].nodeType == 1){ //dosomething }
var ul = document.getElementById("myList"); var li = ul.getElementByTagName("li");