浅谈DOM节点层次——Element类型
一、基本概念
1、Element类型用于表现XML或HTML元素，对元素标签名、子节点及特性的访问，其特性有：
nodeType == 1 ; nodeName == "标签名" ; nodeValue == null ;
2、获取元素名及标签名
<div id="Div"> </div>
var div = document.getElementById("Div");//通过ID获取Div元素
alert(div.tagName); //输出标签名：DIV
alert(div.nodeName); //输出标签名：DIV元素的nodeName属性和tagName属性都能获取元素的标签名，但在HTML中，实际上会输出大写的标签名，而XML与源代码一直，所以需要将标签名转成小写，使用toLowerCase( )方法转小写。
if(element.tagName.toLowerCase( ) == "div"){
//balabala随心所欲的操作
}二、HTML元素
HTML元素都由HTMLElement类型（继承自Element类型）表示，相比Element类型，添加了以下属性
1、id —— 唯一标识符
2、title —— 元素的附加说明信息
3、lang —— 元素内容的语言代码
4、className —— 元素class
以下以id属性举例，查看一个元素的id信息和修改id，其他属性同理。
var div = document.getElementById("my");//获取div元素
alert(div.id); //输出ID：my
div.id = "myNewID" //修改ID特性三、对特性的基本操作：访问、修改、删除
1、访问特性——getAttribute( )方法
attribute翻译：属性、特征
每个元素都有特性，比如<div id = "my" class = "Div" lalala="hello!"> ，这里的红色字体就是特性，而lalala是自定义特性。 用以给出元素或其内容的附加信息，操作特性的DOM方法主要有以下三个，参数为特性名（是实际特性名，比如传class,而不是className）可针对任何特性使用。
getAttribute( )方法——访问元素的特性（包括自定义特性）
var div document.getElementById("my")
alert(div.getAttribute("class"));// 得到div元素的class特性:Div注意：虽然可以通过getAttribute( )方法访问到自定义特性，但却不能将其添加到DOM中，以下例子验证
alert(div.lalala); //undefined（IE除外）有两类特殊的特性，其属性的值与getAttribute( )返回的值不一样
1）style —— 返回的是CSS文本
2）onclick——事件处理程序，返回的是JS函数。
由于有这两类特殊，所以开发时只使用对象的属性，而在自定义特性值时才使用getAttribute( )方法。
2、设置特性——setAttribute( )方法
setAttribute( "特性名" , "值" ) ；包括自定义特性
div.setAttribute("id","myNewId"); //设置id=myNewId
div.id = "myNewId" ;//通过属性赋值方式设置id=myNewId
div.mycolor = "red" ;//不报错，但不能为DOM元素添加自定义特性3、删除特性——removeAttribute( )方法
删除此特性和特性的值
div.removeAttibute("class"); //删除class特性四、attributes属性
1、attributes属性，有一个NamedNodeMap对象，对象拥有以下方法，但不常用
1）getNameItem( name ) ——返回nodeName = name的节点；
2）removeNameItem( name )——删除name节点；
3）setNameItem( node )——添加节点
4）item( 4 )——返回第五位节点
2、attributes属性包含一系列节点，nodeName为特性名，nodeValue为特性值
var id = element.attributes,getNamedItem("id").nodeValue; //获得id特性的值
var id = element.attributes["id"].nodeValue; //获得id特性的值
elemet.attributes["id"].nodeValue = "newId" //修改id的值
五、创建元素
document.creatElement( )方法可创建元素，只有一个参数：标签名
var div = document.createElement("div");//创建div标签
div.className = "myDiv"; //为标签添加特性
document.body.appendChild(div);//将div添加到文档的<body>元素中或者在IE中可以 以 以下方式一次性创建元素和设置特性：只能在IE中使用！
var div = document.createElement("<div id=\"myDiv\" class=\"Div\">"); // 其中\为转移字符
扫一扫
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
