简介：1、DOM:文档对象(document)模型。将整个html页面看作一棵倒挂的树，html就是这棵树根节点， head,body就是这棵树的子节点。DOM模型要求将html中每对标签看作节点对象来操作2.DOM的作用：JavaScript 能够改变页面中的 ...
| 1、DOM:文档对象(document)模型。将整个html页面看作一棵倒挂的树，html就是这棵树根节点， head,body就是这棵树的子节点。DOM模型要求将html中每对标签看作节点对象来操作2.DOM的作用：JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应3.DOM查找页面中的元素节点对象：3.1：通过id查找页面中一个元素节点对象eg:var ob1=document.getElementById("d1"); //将节点对象中内容输出 alert(ob1.innerHTML);3.2:通过标签名查找页面中元素节点集合或数组eg:var arr1=document.getElementsByTagName("h2");//遍历节点对象集合，输出每个对象的内容for(var i=0;i<arr1.length;i++){alert(arr1[i].innerHTML); }3.3:通过类名查找页面中元素节点集合或数组eg:var arr2=document.getElementsByClassName("c1"); //遍历节点对象集合，输出每个对象的内容for(var i=0;i<arr2.length;i++){ alert(arr2[i].innerHTML); }3.4:通过name属性来查找元素节点集合或数组eg:var arr3=document.getElementsByName("hobby"); //遍历节点对象集合，输出每个对象的value属性值for(var i=0;i<arr3.length;i++){ alert(arr3[i].value); }4.DOM操作节点对象的内容(标签中文本内容，子标签，子标签文本......)：4.1：获得节点内容：节点对象.innerHTMLeg:alert(ob1.innerHTML);4.2:修改节点内容: 节点对象.innerHTML=“新值”；eg：ob1.innerHTML="哈哈";4.3：清空节点内容：eg:ob1.innerHTML="";5.DOM操作节点对象的文本内容(标签中的文本和子标签中的文本......)：5.1:获得节点文本内容(标签中的文本和子标签中的文本):节点对象.innerTexteg:alert(ob1.innerText);5.2:修改节点文本内容(标签中的所有内容都修改):节点对象.innerText=“新值”；eg：ob1.innerText="呵呵";6.DOM操作节点对象的属性：6.1：获得节点对象的属性：节点对象.属性名eg:alert(ob2.src);6.2:修改节点对象属性：节点对象.属性名=“值”；eg:ob2.src="img/img-2.jpg";6.3:删除节点对象的属性：节点对象.removeAttribute("属性名");eg:ob2.attributes.removeNamedItem("title");ob2.removeAttribute("title");7.DOM操作节点对象样式：7.1：设置节点对象的样式：节点对象.style.样式名=“样式值”；eg:ob1.style.color="red";ob1.style.backgroundColor="blue";7.2: 获得节点对象的样式: 节点对象.style.样式名eg: alert(ob1.style.color);8.事件8.1：onload:页面加载完事件。8.2：onclick:鼠标单击事件。8.3：onchange:改变事件。8.4：onblur：光标离开事件。8.5：onfocus:获得光标事件。8.6：onmouseover:鼠标经过事件。8.7：onmouseout:鼠标离开事件。9.DOM操作节点对象9.1:创建节点对象：9.1.1:创建标签节点对象：document.createElement("标签名");eg://创建节点对象var node1=document.createElement("p");eg://创建节点对象var node1=document.createElement("h1");node1.innerHTML="你好<span>中国</span>";9.1.2：创建文本对象：document.createTextNode("文本内容");eg://创建文本对象var node1text=document.createTextNode("这是一个段落");9.2:添加节点对象：节点对象.appendChild(子节点);eg://将节点对象添加body中document.getElementById("d1").appendChild(node1);//直接向一个标签中添加子节点document.getElementById("d2").innerHTML=document.getElementById ("d2").innerHTML+"<h2>哈哈</h2><p>呵呵呵</p>";9.3：删除节点对象：父节点对象.removeChild(子节点对象);eg://获得父节点对象var parentNode=document.getElementById("d1") //获得要删除的子节点对象var childNode=document.getElementsByTagName("p")[0];//删除子节点对象//parentNode.removeChild(childNode);//删除当前节点对象，只有谷歌，火狐childNode.remove();9.4：复制节点对象：节点对象.cloneNode(true);eg://获得要复制的节点对象var childNode=document.getElementsByTagName("p")[0];//复制节点对象,true表示复制节点的同时将内容复制，false反之var copyNode=childNode.cloneNode(true);//将复制的节点添加到body中document.getElementById("d1").appendChild(copyNode);9.5: 替换元素中的子节点:父节点对象.replaceChild(newnode,oldnode);本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.yx10011.com学习互联网营销技术请到巅云建站www.yx10011.com。 |
