zoukankan      html  css  js  c++  java
  • JavaScript高级程序设计24.pdf

    Element类型

    Element类型用于表现XML或HTML元素,提供对元素标签名、子节点及特性的访问,它具有以下特征

    nodeType的值为1;

    nodeName的值为元素的标签名;

    nodeValue的值为null;

    parentNode可能是Document或Element;

    要访问元素的标签名可以使用nodeName属性或者tagName属性,两者返回相同的值

    <div id="myDiv"></div>

    var div=document.getElementById("myDiv");

    alert(div.nodeName);  //"DIV"

    在HTML中,标签名始终全部大写,而在XML(有时候也包括XHTML)中,标签名始终与源代码保持一致,可用toLowerCase()转化为小写形式

    HTML元素

     所有HTML元素都由HTMLElement类型表示,不是直接通过这个类型,而是通过它的子类型

    HTMLElement类型直接继承自Element并添加了一些属性,每个HTML元素都有下列标准特性:

    id,元素在文档中的唯一标识符;

    title,附加说明信息,一般通过工具提示条显示出来

    lang,元素内容的语言代码,很少使用

    dir,语言的方向值为"ltr""rtl"也比较少使用

    className,与元素的class特性对应

    <div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

    var div=document.getElementById("myDiv");

    alert(div.id);  //"myDiv"

        ...

    alert(div.dir);  //"ltr"(通过特性属性访问)

    也可以直接赋值

    div.id="someOtherId";

        ...

    div.dir="rtl";

    取得特性

    var div=document.getElementById("myDiv");

    alert(div.getAttribute("id"));  //"myDiv"(通过getAttribute()访问)

        ...

    alert(div.getAttribute("class"));  //"bd" 非"className"

    特性不区分大小写,ID与id代表同一个特性,如果给定名称的特性不存在,返回null

    getAttribute(一个自定义特性名称);  //根据HTML5规范,自定义特性要加前缀data-以便验证

    只有公认的(非自定义的)特性才会以属性的形式添加到DOM中,IE会为自定义特性也创建属性

    alert(div.my_special_attribute);  //undefined(IE除外)

    有两类特殊的特性,通过getAttribute()访问和通过特性属性访问返回的值并不一样:

    1.style通过getAttribute()访问返回的是特性值中包含的css文本,通过特性属性访问返回一个对象

    2.像onclick这样的事件处理程序,通过getAttribute()访问返回的是相应代码的字符串,通过特性属性访问返回一个JavaScript函数

    因此开发人员不常使用getAttribute(),只使用对象的属性,只有在取得自定义特性值得情况下才会用getAttribute()方法

    设置特性

    getAttribute()对应setAttribute(),接收2个参数要设置的特性名和值,若已存在则替换,不存在则创建

    div.setAttribute("id","someOtherId");

    setAttribute()也可以操作自定义特性,通过这个方法设置的特性会被统一转换为小写形式"ID"变成"id"

    自定义属性不会当作元素的特性

    div.mycolor="red";

    alert(div.getAttribute("mycolor"));  //null(IE除外)

    最后一个方法removeAttribute(),彻底删除元素的特性

    div.removeAttribute("class");

    attributes属性

    Element类型是使用attributes属性的唯一一个DOM节点类型,attributes属性包含一个NamedNodeMap,与NodeList类似,也是一个“动态”的集合,NamedNodeMap对象拥有下列方法:

    getNamedItem(name):返回nodeName属性等于name的节点;

    removeNamedItem(name):从列表中移除nodeName属性等于name的节点;

    setNamedItem(node):向列表添加节点,以节点的nodeName属性为索引;

    item(pos):返回位于数字pos位置的节点

    attributes属性包含一系列节点,每个节点的nodeName就是特性的名称,nodeValue就是特性的值

    var id=element.attributes.getNamedItem("id").nodeValue;

    var id=element.attributes["id"].nodeValue;  //方括号的简写方式

    element.attributes["id"].nodeValue="someOtherId";  //设置新属性值

    var oldAttr=element.attributes.removeNamedItem("id");  //删除并返回给定名称的特性

    element.attributes.setNamedItem(newAttr);  //添加新特性

    NamedNodeMap对象的这些方法不够方便,不过在遍历是有比较大的用处

    attrName=element.attributes[i].nodeName;

    创建元素

    document.createElement()方法接收一个参数,即要创建元素的标签名,最好小写(HTML不区分大小写,XML则区分大小写)

    var div=ocument.createElement("div");

    还可以为它添加更多特性

    div.id="myNewDiv";

    div.className="box";

    这些新元素尚未添加到文档树中

    元素的子节点

    <ul id="myList">

      <li>Item1</li>

      <li>Item2</li>

      <li>Item3</li>

    </ul>

    在IE中算3个子节点,其他浏览器中算7个子节点,<li>之间的空格算4个文本节点,实际项目中注意这个差别,可以检查一下nodeType==1,另外元素也支持getElementsByTagName()方法

  • 相关阅读:
    51 nod 1279 扔盘子
    洛谷 P2911 [USACO08OCT]牛骨头Bovine Bones
    1759 加减表达式
    1750 加法表达式
    poj 1006 Biorhythms
    vijos 1198 最佳课题选择
    poj 1390 Blocks
    codevs 3324 新斯诺克
    codevs 2075 yh女朋友的危机
    对拍器
  • 原文地址:https://www.cnblogs.com/sdgjytu/p/3751947.html
Copyright © 2011-2022 走看看