DOM学习笔记（部分）

基础名词

• 文档：一个网页可以称为文档

• 节点:网页中的所有内容都是节点（标签，属性，文本，注释等）

• 元素：网页中的标签

• 属性：标签的属性

api分类

对元素对象的增删改查

对元素属性的增删改查

对元素位置的获取

键盘事件与鼠标事件 事件监听 事件方法 事件对象 [点击，滚动，移入，输入，键入]

node（节点）基础分类

Node.ELEMENT_NODE:1 //标签 *
Node.ATTRIBUTE_NODE:2 //属性 *
Node.TEXT_NODE:3 //文本 *
Node.CDATA_SECTION_NODE:4 //子节点一定为TextNode
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7 //命令节点
Node.COMMENT_NODE:8  //注释
Node.DOCUMENT_NODE:9  //最外层的Root element,包括所有其它节点 *
Node.DOCUMENT_TYPE_NODE:10  // DTD，<!DOCTYPE………..>
Node.DOCUMENT_FRAGMENT_NODE:11 //文档片段节点 
Node.NOTATION_NODE:12 //DTD中的Nation定义

Element类型

Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。Element有下面几条特性：（1）nodeType为1（2）nodeName为元素标签名，tagName也是返回标签名（3）nodeValue为null（4）parentNode可能是Document或Element（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

Text类型

Text表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。Text有下面的特性：（1）nodeType为3（2）nodeName为#text（3）nodeValue为文本内容（4）parentNode是一个Element（5）没有子节点

Attr类型

Attr类型表示元素的特性，相当于元素的attributes属性中的节点，它有下面的特性：（1）nodeType值为2（2）nodeName是特性的名称（3）nodeValue是属性的值（4）parentNode为null

Comment类型

Comment表示HTML文档中的注释，它有下面的几种特征：（1）nodeType为8（2）nodeName为#comment（3）nodeValue为注释的内容（4）parentNode可能是Document或Element（5）没有子节点

Document

Document表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性。Document有下面的特性：（1）nodeType为9（2）nodeName为#document（3）nodeValue为null（4）parentNode为null（5）子节点可能是一个DocumentType或Element

DocumentType

DocumentType表示文档的DTD声明,用于确定文档版本,确定对应的API集与属性解析规则：（1）nodeType为10（2）nodeName为#document-fragment（3）nodeValue为null（4）parentNode为null

DocumentFragment类型

DocumentFragment是所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点。DocumentFragment有下面的特性：（1）nodeType为11（2）nodeName为#document-fragment（3）nodeValue为null（4）parentNode为null

节点选择器

document.getElementById() ID

document.getElementByTagName() 标签名 //返回类数组

document.getElementByClassName() 类名 //返回类数组

//css选择器写法

document.querySelector() 单选择 只会选择符合条件的第一项 $() 在chorm控制台选择器的简写

document.querySelectorAll() //返回类数组 $$()

DOM 节点对象属性

element.title //设置或返回元素的title属性
element.textContent //设置或返回一个节点和它的文本内容
element.innerText //设置或返回一个节点和它的文本内容
element.tagName //作为一个字符串返回某个元素的标记名（大写）
element.className //获取标签的class属性值
​
nodelist.length //返回节点列表的节点数目。
nodelist.item(idx) //返回某个元素基于文档树的索引 同 nodelist[idx]

DOM API 获取标签属性

var oHeader = document.getElementById('header');
var aImg = document.getElementsByTagName('img');
​
console.log(oHeader.attributes); //节点属性对象 拥有长度属性
​
console.log(oHeader.id); //指定属性获取
​
console.log(aImg[0].src);//指定属性获取
​
console.log(aImg.getAttribute('src')); //通过 getAttribute方法获取实际 属性值
​
console.log(aImg.hasAttribute('src')); // 判断节点对象是否含有 某个 属性

DOM API 获取样式

获取标签样式只能是行内样式

setAttribute 针对标签属性

DOM API

获取元素运算后的样式

window.getComputedStyle(对象名，属性名)

IE8以下用currentStyle

//行内样式
console.log(oImg.style); //CSSOM对象
console.log(aImg.style.outline); //标签行内样式 style属性中存在的样式的值
​
//实际样式
console.log(window.getComputedStyle(oImg, null)['border']); //主流浏览器
console.log(oImg.currentStyle['border']); //老版本IE
​
//兼容函数写法
function getStyle(obj, attr) {
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}

DOM API 获取节点内容

console.log(oHeader.innerHTML); //获取标签内的实际内容(包括标签)
​
 console.log(oHeader.innerText);  //设置标签中间的文本内容，应该使用innerText属性,谷歌火狐支持，ie8支持
 console.log(oHeader.textContent); //设置标签中间的文本内容，应该使用textContent属性,谷歌火狐支持，ie8不支持
​
​
//textContent 与 innerText兼容处理
function getInnerText(element) {
    if(typeof element.textContent=="undefined"){
        return element.innerText;
    }else{
        return element.textContent;
    }
}
​

DOM API 获取节点相关节点

console.log(oHeader.children); //获取子元素 只有标签 内容不行
console.log(oHeader.childNodes); //获取子节点 包含文本节点与标签节点
​
console.log(oHeader.firstChild); //获取第一个子节点(包含文本)  节点
console.log(oHeader.firstElementChild); //获取第一个子标签节点  标签
​
​
console.log(oHeader.lastChild); //获取最后一个子节点(包含文本)
console.log(oHeader.lastElementChild); //获取最后一个子标签节点
​
console.log(aP[0].parentElement); //父元素
console.log(aP[0].parentNode); //父节点
​
console.log(aP[1].nextElementSibling); //下一个兄弟标签节点
console.log(aP[1].nextSibling); //下一个兄弟节点(计算文本节点)
​
​
console.log(aP[2].previousElementSibling); //上一个兄弟标签节点
console.log(aP[2].previousSibling); //上一个兄弟节点(计算文本节点)
​

DOM API 创建与添加节点标签

var cP = document.createElement("p"); //创建标签节点
​
var content = document.createTextNode("你好"); //创建文本节点
​
cP.appendChild(content); //添加content到cP节点中
document.body.appendChild(cP); //添加cP到body标签中进行渲染
​
---------------------------------------
    
//通过文本标签方式添加节点   
var htmlTxt = '<p>哈哈哈</p>';
document.body.innerHTML += htmlTxt;
​
//HTML输出流 直接覆盖body中的内容
document.write('<p>123</p>'); 
​
----------------------------------------
//在父节点ELE里面的节点A前面添加 新的节点B
​
ELE.insertBefore(B,A);

DOM API 拷贝节点 插入元素

.cloneNode (true) /拷贝)

//cloneNode方法会对调用它的节点对象进行复制 传参true代表包括该节点的后代节点 不传参数表示只复制该节点本身

parent.insertBerfore(B,A) //在父节点parent 里面的节点A前面添加节点B

替换元素

parent.replaceChild(new,old);

new 如果是在页面已经存在的元素 会进行剪切复制 覆盖操作

node节点删除

removeChild 删除子元素 parent.removeChild(childEle)

你要删除的元素.remove() 直接删除

has 节点检测

document.hasFocus(); //返回布尔值，检测文档或元素是否获取焦点
element.hasChildNodes(); //返回布尔值,检测节点对象是否包含任何子节点
element.isEqualNode(element2); //返回布尔值,判断element与element2是否是同一个节点
element.hasAttributes(); //返回布尔值,判断当前节点对象是否包含属性
element.hasAttribute(property); //返回布尔值, 判断该节点是否拥有指定的 property 属性

回流与重绘

渲染顺序 位置 定位放前面

页面发生改动 每一次都要重新绘制

creatDomcumentFragment 文档片段 文档气泡 临时容器 可以往里面放任何东西

window.onload = function(){

把页面加载完后在运行js

e.type (触发事件类型)

函数开关写法

预设初始值

创建开关变量 进行if判断 判断开关变量 来改变事件变量

赋予变量数值

开关变量 var kaigaun = ture | kaiguan = ！kaiguan（这一步让开关自己进行布尔转换）