《javascript高级程序设计2》学习笔记10 DOM DOM2和DOM3

将所有有关的dom讲解都放在一起来写笔记，这样对连贯性的理解会好一些。

DOM方面的笔记不会按本书的内容来写笔记，会有《javascriptDOM编程艺术》和《javascript模式》这俩本书中的读书笔记。

 

关注分离

 

内容

      html文档

表现

     指定文档的外观的css样式

行为

    处理用户交互和文档各种动态变化的javascript

 

appendChild() 添加

replaceChild() 替换

removeChild() 删除

cloneNode() 创建调用这个方法节点的副本

                     true   深复制，复制节点及其整个子节点数

                     false  浅复制，只复制节点本身。

 

Document类型

getElementById()   要取得的元素id

getElementsByTagName() 取得元素的标签名

getElementsByName() 带有给定name特性的所有元素

 

 

文档写入

write() 原样写入

writeIn() 在字符串的末尾添加一个换行符（\n）

open()

close()

 

Element类型

操作特性

getAttribute()

setAttribute()  要设置的属性名和值

removeAttribute()

 

创建元素

createElement()

 

创建文本节点

createTextNode()  要插入节点的文本

 

DOM扩展

滚动

scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素    所有浏览器

scrollIntoViewIfNeeded(alignCenter)  只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让当前元素可见。                safari chrome

作用的是元素的窗口

 

scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度。    safari chrome

scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度。  safari chrome

作用的是元素自身

 

contains()方法

alert(document.documentElement.contains(document.body));  firefox从版本21后开始支持

操作内容

innerText()  处理的是普通文本字符串 firefox不支持

innerHTML()   处理的是html字符串

outerText()    这个节点会修改调用它的元素，不建议使用

outerHTML()       不建议使用

 

创建表格

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

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

            tbody.insertRow(0);
            tbody.rows[0].insertCell(0);
            tbody.rows[0].cells[0].appendChild(document.createTextNode("第一行单元格1"));
            tbody.rows[0].insertCell(1);
            tbody.rows[0].cells[1].appendChild(document.createTextNode("第一行单元格2"));
            
            tbody.insertRow(1);
            tbody.rows[1].insertCell(0);
            tbody.rows[1].cells[0].appendChild(document.createTextNode("第二行单元格1"));
            tbody.rows[1].insertCell(1);
            tbody.rows[1].cells[1].appendChild(document.createTextNode("第二行单元格2"));

            document.body.appendChild(table);

 未完待续。。。