红皮书（9）：DOM

头像
小渝人儿
    阅读 4 分钟

    Node类型

    nodeType
    以下是一些重要的nodeType的取值：
    1： 元素element
    2： 属性attr
    3： 文本text
    8： 注释comments
    9： 文档document

    nodeName,nodeValue

    节点关系

    childNodes: 每个节点都有一个childNodes属性，其中保存着一个NodeList对象

    firstChild: 等同于childNodes[0]

    lastChild: 等同于childNodes.length-1

    同时通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。

    操作节点

    appendChild()
    appendChild()方法用于向childNodes列表的末尾添加一个节点。添加节点后，childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应地得到更新。

    insertBefore()
    insertBefore()这个方法接受两个参数：要插入的节点和作为参照的节点。

    // 插入后成为最后一个子节点
returnedNode = someNode.insertBefore(newNode,null);

// 插入后成为第一个节点
returnedNode = someNode.insertBefore(newNode,someNode.firstChild);

// 插入到最后一个子节点前面
returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

    repaceChild()
    repaceChild()接受两个参数，要插入的节点和要替换的节点

    var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

    removeChild()
    只移除而非替换节点。

    var formerFirstChild = someNode.removeChild(someNode.firstChild);

    cloneNode()

    

      

    • item 1
      • 
    
    • item 2
      • 
    
    • item 3
      • 

    

    var deepList = myList.cloneNode(true);
console.log(deepList.length); // 3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

    


    Document类型
    


    Document节点具有下列特征：
    
nodeType的值为9；
    
nodeName的值为#document;
    
nodeValue的值为null;
    
parentNode的值为null;
    
ownerDocument的值为null;
    


    文档的子节点
    


    var html = document.documentElement; // 取得对<html>的引用
console.log(html === document.childNodes[0]); // true
console.log(html === document.firstChild); // true

    


    文档信息
    


    // 取得文档的标题
var originalTitle = document.title; 


// 设置文档标题
document.title = "New page title";


// 取得完整的url
var url = document.URL;
// 取得域名
var domain = document.domain;
// 取得来源页面的url
var referrer = document.referrer;




//假设页面来自p2p.wrox.com域
document.domain = "wrox.com"; // 成功
document.domain = "nczonline.net"; // 失败

    


    在IE7中调用document.getElementById("myElement");结果会返回<input>元素，如下所示；
    
 最好的办法是不让表单字段的name特性与其他元素的ID相同。
    


    <input type="text" name="myElement" value="text field">
<div id="myElement">a div</div>

    


    特殊集合
    


    document.anchors,包含文档中所有带name特性的a元素;
    
document.forms, 包含文档中所有form元素，与document.getElementsByTagName("form")得到的结果相同;
    
document.images,包含文档中所有的img元素，与document.getElementsByTagName("img")得到的结果相同;
    
document.links，包含文档中所有带href特性的a元素;
    


    文档写入
    


    <html>
<head>
      <title>document.write() Example 3</title>
</head>
<body>
     <script type="text/javascript">
          document.write("<script type=\"text/javascript\" src=\"file.js\">") + "<\/script>");
     </script>
</body>
</html>

    


    字符串<\/script>不会被当作外部script标签的关闭标签，因而页面中也就不会出现多余的内容了。
    


    Element类型
    


    Element节点具有以下特征：
    
nodeType的值为1;
    
nodeName的值为元素的标签名;
    
nodeValue的值为null;
    
parentNode可能是Document或Element;
    


    要访问元素的标签名，可以使用nodeName属性，也可以使用tagName属性；
    


    <div id="myDiv"></div>
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV


if (element.tagName=="div") { // 不能这样比较，很容易出错
}

if (element.tagName.toLowerCase =="div") { // 这样最好（适用于任何文档）
}

    


    取得特性
    


    操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()、removeAttribute()；
    
注意，传递给getAttribute()的特性名与实际的特性名相同。印象要想得到class的特性值，应该传入"class"而不是"className"。
    


    var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd

    


    创建元素
    


    使用document.createElement()方法可以创建新元素。
    


    元素的子节点
    


    在执行某项操作以前，通常都要先检查一下nodeType属性，如下面的例子所示:
    


    for (var i=0; len = element.childNodes.length; i<len; i++){
    if (element.childNodes[i].nodeType ==1) {
        // 执行某些操作
    }
}

    


    Text类型
    


    Text节点具有以下特征：
    
nodeType的值为3；
    
nodeName的值为"#text";
    
nodeValue的值为节点所包含的文本；
    
parentNode是一个Element；
    


    创建文本节点
    


    可以使用document.createTextNode()创建新文本节点。
    


    规范化文本节点
    


    normalize()
    


    分割文本节点
    


    splitText()
    


    Comment类型
    


    comment节点具有下列特征：
    
nodeType的值为8;
    
nodeName的值为"#comment";
    
nodeValue的值是注释的内容；
    
parentNode可能是Document或Element；
    
不支持（没有）子几点；
    


    DOM操作技术
    


    操作表格
    


        // 创建 table
var table = document.createElement("table");
table.border = 1;
table.width = "100%";

// 创建tbody
var tbody = document.createElement("tbody");
table.appendChild(tbody);

// 创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));


// 创建第二行
tbody.insertRow(01);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));

document.body.appendChild(table);

    

    javascript
    小渝人儿
    1.1k 声望849 粉丝
    前端工程师
    « 上一篇
    红皮书（8）：客户端检测
    下一篇 »
    红皮书（10）：DOM扩展
    引用和评论
    推荐阅读
    头像
    更简单的理解Pod和容器
    小渝人儿阅读 3k
    头像
    腾讯新闻中心首页改版啦
    小蚊酱赞 11阅读 9.4k评论 7
    头像
    前端如何入门 Go 语言
    robin赞 26阅读 7.7k评论 8
    头像
    100个React最佳实践小技巧
    夕水赞 17阅读 2.6k评论 4
    头像
    前端开发工具
    寒青赞 15阅读 4.7k
    头像
    开发插件集合
    寒青赞 12阅读 3.1k
    头像
    JS校验身份证号
    寒青赞 10阅读 4.3k评论 2
    0 条评论
    得票最新