javaScript - DOM

DOM 知识体系

1. 五种类型的节点
2. 元素的操作
   2.1 获取元素
   2.2 根据文档关系获取元素
   2.3 读写元素的属性
   2.4 读写元素的样式
   2.5 读写元素中的内容
   2.6 获取元素的尺寸
   2.7 获取元素的位置
   2.8 读写元素中内滚动的距离
3. 节点的创建添加删除替换克隆
   document.createElement()
   父元素.appendChild()
   父元素.insertBefore()
   父元素.removeChild()
   父元素.replaceChild()
   元素.cloneNode()
 4. document
    all / body / documentElement / head / lastModified / title
 5. documentFragment
    nodeType: 11
    document.createDocumentFragment()
 

关于元素的位置和大小

offsetWidth / offsetHeight		获取元素宽高（内容+padding+border）
clientWidth / clientHeight		获取元素宽高（内容+内边距）
scrollWidth / scrollHeight		获取在 client 的基础上加上溢出部分的宽高

offsetLeft / offsetTop		获取元素在第一个定位的祖先元素上的位置，没有定位的祖先元素就是在页面上的位置
clientLeft / clientTop		获取元素左边框宽度和上边框宽度

scrollLeft / scrollTop		获取或设置元素中内容滚动的距离（位置）

getBoundingClientRect()		返回一个对象,有如下属性
							.left
							.top
							.x
							.y
							.right
							.bottom
							.width
							.height							

关于整个页面在视口上滚动的位置

// 获取整个页面在视口中向上滚动的距离
document.documentElement.scrollTop || document.body.scrollTop

// 获取整个页面在视口中向左滚动的距离
document.documentElement.scrollLeft || document.body.scrollLet

// 设置页面在视口上的滚动位置
document.documentElement.scrollTop = 600;   // 页面会向上滚动 600 px
document.body.scrollTop = 600;

获取视口的大小

// 获取视口的宽和高
window.innerWidth / window.innerHeight;


// 获取视口的宽和高	(不会计算滚动条本身的宽度/高度)
document.documentElement.clientWidth
document.documentElement.clientHeihgt

2 HTML DOM

2.1 表单相关元素

① form 元素

submit()		调用该方法可以让表单提交
reset()			调用该方法可以让表单重置

② 文本输入框和文本域（input 和 textarea）

focus()			调用该方法会让元素获取焦点
blur()			调用该方法会让元素失去焦点
select()		调用该方法会选中里面的文字内容

③ select 元素

length		设置或获取下拉选项的数量
options		获取所有下拉选项的集合
value		获取所选的下拉选项的value
selectedIndex	获取所选下拉选项的索引

add（）		添加一个下拉选项，参数是option元素对象
remove()	 删除指定的下拉选项，参数是索引

2.2 表格相关元素

① table 元素

rows			得到表格中所有行的集合
cells			得到表格中所有单元格的集合（th以及td）
insertRow()		在表格中插入一行，方法返回新插入的tr元素； 参数是新行的位置，不指定就是最后
deleteRow()     删除一行，指定行的索引

② tableRow 元素（tr 元素）

rowIndex		获取本行的索引
cells			获取本行内所有单元格的集合
insertCell()	在本行中插入一个单元格，方法返回新插入的td元素，参数是新单元格的位置，不指定就是最后
deleteCell()	删除本行中一个单元格，指定单元格在本行内的索引

③ tableCell 元素 （td 或 th）

cellIndex		获取本单元格在行内的索引

2.3 快速创建元素

// 通用方法创建 option 元素
var option1 = document.createElement('option');
option1.innerHTML = '小乐'
option1.value = 'xiaole';

// 使用快捷方法创建 option 元素
var option2 = new Option('朦朦', 'mengmeng');

// 通用方法 创建 img 元素
var img1 = document.createElement('img');
img1.src = '100.jpg';

// 快捷方法创建 img 元素
var img2 = new Image();
img2.src = '200.jpg'