文章目录
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');
六.事件
给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>