Day14_DOM课堂笔记

Day14 DOM 笔记

1 回顾 元素操作

1. 元素的属性操作
   1.1 读写内置属性
   1.2 读写自定义属性
   1.3 读写data-形式的自定义属性

2. 元素的样式操作
   2.1 读写元素的行内样式
       元素.style.属性名
   2.2 读取计算样式
   	   getComputedStyle(元素).属性名
   2.3 元素类名操作 className
   2.4 元素类名操作 classList
   	   元素.classList.add()
   	   元素.classList.remove()
   	   元素.classList.toggle()
   	   元素.classList.length

3. 读写元素中的文本内容
   元素.innerHTML;
   元素.outerHTML;
   元素.innerText;
   元素.textContent;

4. 读取元素的尺寸
   元素.offsetWidth、元素.offsetHeight
   元素.clientWidth、元素.clientHeight
   元素.scrollWidth、元素.scrollHeight
   元素.getBoundingClientRect().width
   							  .height
	
5. 读取元素的位置
   元素.offsetLeft、元素.offsetTop
   元素.clientLeft、元素.clientTop
   元素.getBoundingClientRect().left
							  .top
							  .x
							  .y
							  .right
							  .bottom

6. 读写元素中内容的位置（内容滚动的距离）
   元素.scrollLeft、元素.scrollTop

2 节点（元素）的创建添加删除替换克隆

2.1 创建元素节点

// 方法返回新创建的元素
document.createElement('标签名');  

2.2 添加子节点

① 在最后面添加子节点

父元素对象.appendChild(新节点);

② 指定位置添加子节点

父元素对象.insertBefore(新节点, 旧节点);

2.3 删除子节点

父元素对象.removeChild(要被删除的节点);

2.4 替换子节点

父元素对象.replaceChild(新节点， 旧节点);

2.5 节点克隆

// 方法返回克隆出来的元素
元素.cloneNode(true);

参数含义：
true: 表示深度克隆，元素以及后代元素都克隆。
false: 表示浅克隆，只克隆元素本身，不克隆后代元素，默认值。

3 HTML DOM

3.1 表单相关元素

① form 元素

submit()		提交表单
reset()			重置表单

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

主要包括 type 值是 text、password、email、url、number、tel、search 的input 标签 和 textarea 标签。

blur()			失去焦点
focus()			获取焦点
select()		选中输入框中文字

③ select 元素

value			获取被选中的下拉选项的value
length			获取下拉选项的个数，该属性可读可写
selectedIndex	获取被选中的下拉选项的索引

add()			追加一个下拉选项，参数是个option元素
remove()		删除一个下拉选项，参数是索引

// 创建 option 元素，快捷方式
new Option('选项中的文字', 'value值');

3.2 表格相关元素

① table 元素

rows			获取表格中所有的行元素的集合
insertRow()		插入一个新行，可以指定插入位置，方法返回新的tr元素
deleteRow()		删除一行，指定索引

② tableRow 元素（tr 元素）

cells			获取该行内所有单元格元素的集合
rowIndex		获取改行的索引
insertCell()	插入新的单元格，可以指定索引，方法返回新的td元素对象
deleteCell()	删除一个单元格，指定索引

③ tableCell 元素 （td 或 th）

cellIndex		获取该单元格在行中的索引

3.3 快速创建 img 元素

// 创建 img 元素
new Image();

// 创建 img 元素并设置宽高属性
new Image(500, 400);

4 document 对象

document.documentElement			获取html元素
document.body						获取body元素
document.head						获取head元素
document.all						获取文档中所有的元素组成的集合
document.URL						获取当前页面的URL地址
document.domain						获取页面URL中的主机名
document.referrer					获取上一个历史记录的地址
document.lastModified				获取文档最后一次修改时间
document.title						读写页面标题内容


document.write()					将内容输出到文档
document.getElementById()			获取元素
document.getElementsByTagName()		获取元素
document.getElementsByClassName()	获取元素
document.getElementsByName()		获取元素
document.querySelector()			获取元素
document.querySelectorAll()			获取元素
document.createElement()			创建一个元素

5 事件

5.1 事件监听

① 给元素监听事件的三种方式

第一种方式： 事件作为HTML标签的属性：

<button onclick="js代码..."></button>

第二种方式： 事件作为元素对象的方法：

元素对象.onclick = function() {
  	代码...;  
};

元素对象.onclick = 函数名;

同一个元素添加多个相同的事件，后面的覆盖前面！

第三种方式：使用 addEventListenrer 方法：

元素对象.addEventListener('click', function() {
   代码...; 
});

元素对象.addEventListener('click', 函数名);

同一个元素可以监听多次相同的事件！

了解：

IE 8 以及以下浏览器，不支持 addEventListener()、removeEventListener() ，可以使用 attachEvent()、detachEvent()。

② 解除事件的监听

第一种和第二种方式监听的事件：

元素对象.on事件名 = null;

第三种方式监听的事件：

元素对象.addEventListener('事件名', 回调函数名);

使用 addEventListener 方式监听事件，如果将来需要解除监听，回调函数必须是有名字的函数。