主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] 除了Document类型之外,Element类型是JavaScript编程中最常使用的类型。Element类型常用于表现HTML或XML元素,提供对元素标签名、子节点及特性的访问。...
除了类型之外,Element类型是JavaScript编程中最常使用的类型。Element类型常用于表现HTML或XML元素,提供对元素标签名、子节点及特性的访问。Element节点具有以下的特点:
要访问元素的标签名可以使用nodeName属性,也可以使用tagName属性,这两个属性会返回相同的值,例如下面的例子: <div id="myDiv"></div> 可以像下面这样获取这个元素的标签名称: var div = document.getElementById("myDiv"); console.info(div.tagName); //输出“DIV” console.info(div.tagName == div.nodeName); //true 在HTML中,标签始终以大写字母来表现,因此 //错误的写法 if(element.tagName == "div"){ } //正确的写法 if(element.tagName.toLowerCase() == "div"){ } 所有的HTML元素都由HTMLElement类型来表示,不是通过这个类型,也是通过它的子类型来表示。HTMLElement类型直接继承自Element类型,并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的系列特性:
上面的这些属性都可以用来获取或修改相应的特性值。例如下面的例子: <div id="myDiv" class="htmleaf" title="jQuery之家" lang="zh" dir="ltr">jQuery之家</div> 我们可以在控制台中输出上面的属性值: var div = document.getElementById("myDiv"); console.info(div.id); console.info(div.className); console.info(div.title); console.info(div.lang); console.info(div.dir); 要给这些属性赋值,可以像下面这样操作: div.id = "otherId"; div.className = "otherClass"; div.title = "otherTitle"; div.lang = "en"; div.dir = "rtl"; 每一个元素都有一个或多个属性,操作元素属性的DOM方法有3个,分别是:
上面的这些方法可以对任何属性使用,例如: var div = document.getElementById("myDiv"); console.info(div.getAttribute("id")); console.info(div.getAttribute("class")); console.info(div.getAttribute("title")); console.info(div.getAttribute("lang")); console.info(div.getAttribute("dir")); 通过 <div id="myDiv" my-attribute="hello">自定义属性</div> 可以像获取其它属性一样获取这个自定义属性的值。 var div = document.getElementById("myDiv"); console.info(div.getAttribute("my-attribute")); //hello 提示:属性名称不区分大小写,即"ID"与"id"代表同一个属性。
有两个特殊的属性,它们虽然有对应的属性名,但是属性的值与通过 与 div.setAttribute("id","myDiv"); div.setAttribute("class","div-class"); div.setAttribute("title","div-title"); 通过 也可以直接使用属性赋值的方式来设置属性值: div.id = "myDiv"; div.align = "left"; 但是像下面这样为DOM元素添加一个自定义属性,这个属性不会自动成为元素的特性: div.myColor = "red"; alert(div.getAttribute("myColor")); //返回null 要删除一个元素的特性,可以使用 div.removeAttribute("class"); Element类型是唯一一个使用attribute属性的DOM节点类型。attribute属性中包含一个NamedNodeMap,于NodeList相似,也是一个动态的集合。元素的每一个特性都由一个Attr节点表示,每一个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有以下一些方法:
attribute属性包含一系列的节点,每个节点的 var id = element.attribute.getNamedItem("id").nodeValue; 也可以通过方括号的方式来简写上面的代码: var id = element.attribute["id"].nodeValue; 也可以通过这种语法来设置属性值: element.attribute["id"].nodeValue = "myDiv"; 调用 var oldAttr = element.attribute.removeNamedItem("id"); 我们通过 var div = document.createElement("div"); 在使用 var div = document.createElement("div"); div.id = "myDiv"; div.className = "div-class"; 在新元素上设置这些特性只是为元素添加了相应的信息。由于新元素还没有被添加到文档树中,所以这些特性不会浏览器的显示。要把新元素添加到文档树中,可以使用 var div = document.createElement("div"); document.body.appendChild(div); 一旦新元素被添加到文档树中,浏览器就会立刻展现该元素。之后,对该元素所做的任何修改都会在浏览器中被反应出来。 元素可以有任意数量的子节点和后代节点。元素的childNodes属性中包含了它的所有子节点,这些子节点有可能是元素、文本节点、注释或处理指令。不同的浏览器对待这些节点有不同的处理方法,以下面的代码为例: <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> 如果是IE浏览器来解析这段代码,那么 <ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul> 对于上面的代码, for(var i = 0,len = element.childNodes.length; i < len; i++){ if(element.childNodes[i].nodeType == 1){ //执行某些操作... } } 这个例子会循环遍历特定元素的每一个子节点,在子节点的nodeType类型为1时(表示元素节点),才执行某些操作。 如果想通过某个特定的标签名称来获取子节点和后代节点,可以使用 var ul = document.getElementById("myList"); var items = ul.getElementsByTagName("li"); 上面的 |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com