Javascript操作DOM常用API

Javascript操作DOM常用API

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树）

一.Node 接口

1.属性

属性	返回值
Node.prototype.nodeType	返回一个整数值，表示节点的类型
Node.prototype.nodeName	返回节点的名称
Node.prototype.nodeValue	返回一个字符串，表示当前节点本身的文本值，可读写
Node.prototype.textContent	返回当前节点和它的所有后代节点的文本内容
Node.prototype.baseURI	返回相对路径的 URL。只读
Node.prototype.parentNode	返回当前节点的父节点
Node.prototype.parentElement	返回当前节点的父元素节点
Node.prototype.childNodes	返回一个类似数组的对象，当前节点的所有子节点
Node.prototype.isConnected	返回一个布尔值，表示当前节点是否在文档之中

2.方法

方法	作用
Node.prototype.appendChild()	接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点
Node.prototype.hasChildNodes()	返回一个布尔值，表示当前节点是否有子节点
Node.prototype.cloneNode()	克隆一个节点。它接受一个布尔值作为参数，表示是否同时克隆子节点
Node.prototype.insertBefore()	插入父节点内部的指定位置
Node.prototype.removeChild()	从当前节点移除该子节点
Node.prototype.replaceChild()	替换当前节点的某一个子节点

二.NodeList 接口，HTMLCollection 接口

• NodeList 接口

属性	返回值
NodeList.prototype.length	返回 NodeList 实例包含的节点数量
NodeList.prototype.forEach()	遍历 NodeList 的所有成员。可以有回调函数(每次调用)作为参数
NodeList.prototype.item()	返回该参数指定位置的成员

• HTMLCollection 接口

属性	返回值
HTMLCollection.prototype.length	返回HTMLCollection实例包含的成员数量
HTMLCollection.prototype.item()	返回该指定位置上的成员

三.ParentNode 接口，ChildNode 接口

• ParentNode 接口

属性	返回值
ParentNode.children	返回一个实例，成员是当前节点的所有元素子节点
ParentNode.firstElementChild	返回当前节点的第一个元素子节点
ParentNode.lastElementChild	返回当前节点的最后一个元素子节点
ParentNode.childElementCount	返回一个整数，表示当前节点的所有元素子节点的数目
ParentNode.append()	追加一个或多个子节点到最后一个元素子节点的后面

• ChildNode 接口

属性	返回值
ChildNode.remove()	移除当前节点
ChildNode.before()	当前节点的前面，插入一个或多个同级节点；after同理
ChildNode.replaceWith()	替换当前节点

四.Document 节点

属性

快捷方式属性

节点集合属性

文档静态信息属性

文档状态属性

document.cookie

document.designMode

document.implementation

方法

document.open()，document.close()

document.write()，document.writeln()

document.querySelector()，document.querySelectorAll()

document.getElementsByTagName() //搜索 HTML 标签名

document.getElementsByClassName() //搜索 CLASS类名

document.getElementsByName() //搜索 属性名

document.getElementById() //搜索 ID名

document.elementFromPoint()，document.elementsFromPoint()

document.caretPositionFromPoint()

document.createElement() //生成元素节点

document.createTextNode() //生成文本节点

document.createAttribute() //生成一个新的属性节点

document.createEvent() //生成一个事件对象

document.addEventListener()，document.removeEventListener()，document.dispatchEvent()

document.hasFocus()

document.adoptNode()，document.importNode()

document.createNodeIterator()

document.createTreeWalker()

document.execCommand()，document.queryCommandSupported()，document.queryCommandEnabled()

document.getSelection()

五.CSS 操作

操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法，直接读写或删除网页元素的style属性

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid black;'
);

1.CSSStyleDeclaration 接口

CSSStyleDeclaration 接口可以直接读写 CSS 的样式属性，不过，连词号需要变成骆驼拼写法

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';

divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

(1)CSSStyleDeclaration 实例属性

• CSSStyleDeclaration.cssText 读写当前规则的所有样式声明文本

var divStyle = document.querySelector('div').style;

divStyle.cssText = 'background-color: red;'
  + 'border: 1px solid black;'
  + 'height: 100px;'
  + 'width: 100px;';
divStyle.cssText = '';         //删除一个元素的所有行内样式

• CSSStyleDeclaration.length 返回一个整数值，表示当前规则包含多少条样式声明

// HTML 代码如下
// <div id="myDiv"
//   style="margin: 0 10px; background-color: #CA1; border: 1px solid red;"
// ></div>
var myDiv = document.getElementById('myDiv');
var divStyle = myDiv.style;
divStyles.length // 3

(2)CSSStyleDeclaration 实例方法

• CSSStyleDeclaration.getPropertyValue() 返回一个字符串，表示该属性的属性值

// HTML 代码为
// <div id="myDiv" style="margin: 10px!important; color: red;"/>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyValue("margin") // "10px"

• CSSStyleDeclaration.item() 返回该位置的 CSS 属性名

// HTML 代码为
// <div id="myDiv" style="color: red; background-color: white;"/>
var style = document.getElementById('myDiv').style;
style.item(0) // "color"
style.item(1) // "background-color"

• CSSStyleDeclaration.removeProperty() 移除这个属性

// HTML 代码为
// <div id="myDiv" style="color: red; background-color: white;">
//   111
// </div>
var style = document.getElementById('myDiv').style;
style.removeProperty('color') // 'red'
// HTML 代码变为
// <div id="myDiv" style="background-color: white;">

• CSSStyleDeclaration.setProperty() 设置新的 CSS 属性

// HTML 代码为
// <div id="myDiv" style="color: red; background-color: white;">
//   111
// </div>
var style = document.getElementById('myDiv').style;
style.setProperty('border', '1px solid blue');

六.事件

javascripts-事件流

javascripts-事件处理程序

javascripts-事件对象

javascripts-事件类型之鼠标事件

给Element对象附加一些事件属性.属性的类型是Function类型.这些Function属性在什么时候被运行呢?
只看属性的名称

常用事件的属性名称：

onclick ==> 单击时触发
ondblclick ==> 双击时触发
onblur ==> 失去焦点时触发
onfocus ==> 得到焦点时触发
onchange ==> 用于表单元素, 当元素被修改时触发
onkeydown ==> 当键盘按键被按下时
onmousemove ==> 当鼠标移动时触发
onmousedown ==> 当鼠标按键按下时触发
onmouseover ==> 当鼠标指向时触发
onmouseout ==> 当鼠标移出时触发
onsubmit ==> 当表单提交时触发
onload ==> 只给body标签使用.当页面加载完成后 执行

1.事件流

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。【推荐】

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子

var outerCircle= document.getElementById("outer");
outerCircle.addEventListener("click", function () {
    alert("outerCircle的click事件在捕获阶段被触发");
},true);                //true为捕获
outerCircle.addEventListener("click", function () {
    alert("outerCircle的click事件在冒泡阶段被触发");
},false);               //true为冒泡

2.事件处理程序

(1)html事件处理程序 ------事件直接加在html元素上

<input type="button" value="click me!" onclick="showMessage()"/>
<script>
function showMessage(){
    alert("clicked!");
}
</script>

(2)DOM0级事件处理程序 ----------把一个函数赋值给一个事件处理程序属性

<input id="myBtn" type="button" value="click me!"/>
<script>
	//第一步：myBtn=document.getElementById("myBtn");取得btn对象
    var myBtn=document.getElementById("myBtn");
	//第二步：myBtn.onclick其实相当于给myBtn添加了一个onclick的属性。
	//第三步：把函数赋值给onclick事件处理程序属性
    myBtn.onclick=function(){
        alert("clicked!");
    }
	//删除事件
	myBtn.onclick=null;
</script>

(3)DOM2级事件处理程序

DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序：addEventListener()和removeEventListener()

<input id="myBtn" type="button" value="click me!"/>
<script>
    var myBtn=document.getElementById("myBtn");
    myBtn.addEventListener("click",function(){
        alert("hello");
    },false);
	//删除事件
    myBtn.removeEventListener("click",handler,false);
</script>