将所有有关的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);
未完待续。。。