*** 作元素时其实就是把这个元素看成一个对象，* 然后使用其对象的属性和方法进行 *** 作。
节点包括元素，二者实际不是同一概念* DOM节点有12种类型，其中常用的三种：元素节点，属性节点，文本节点* 不同节点的nodeType属性值：* 元素节点：1* 属性节点：2* 文本节点：3** 一，获取元素（实际获取元素节点），js种有以下方式：* 1，getElemnetById()* 2，getElemnetByTagName():返回一个类数组（伪数组）：只能使用length属性和下标形式* 3，getElemnetByClassName()* 4，getElemnetByName():只用于表单元素，一般用于单选按钮和复选框* 5，querySelector()和querySelectorAll()* 6，document.title()和document.body()* 二，创建元素：（动态DOM *** 作）* 创建元素节点：createElement()* 创建文本节点：createTextNode()* 总结：创建一个元素的步骤：* (1)创建元素节点：createElement()* (2)创建文本节点：createTextNode()* (3)把文本节点插入元素节点：appendChild()* (4)把组装好的元素插入到已有的元素中：appendChild()* 三，插入元素* 1，appenChild() :把一个元素插到父元素的内部子元素的末尾* 2，insertBefore():把一个元素插到父元素的内部某个子元素的之前** 四，删除元素：removeChild()* 五，赋值元素：obj.cloneNode(bool)* obj:被复制的对象* bool:参数 true：复制元素本身及其子元素 false：仅仅复制本身* 六，替换元素：replaceChild(new,old)*///创建简单元素window.onload =function(){var oDiv = document.getElementById(“content”);var oStrong = document.createElement(“strong”);var oTxt = document.createTextNode(“逗比小憨憨”);oStrong.appendChild(oTxt);oDiv.appendChild(oStrong);}//创建带属性的元素window.onload =function(){var oInput = document.createElement(“input”);oInput.id = “sumit”;oInput.type = “button”;oInput.value = “提交”;document.body.appendChild(oInput);}//创建动态图片window.onload =function(){var oImg = document.createElement(“img”);oImg.className = “doubi”;oImg.src = “img/doubi.jpg”;oImg.style.border = “1px solid silver”;document.body.appendChild(oImg);}//创建多个元素window.onload =function(){var oTable = document.createElement(“table”);for(var i = 0; i < 3;i++){var oTr = document.createElement(“tr”);for(var j = 0; j < 3; j++){var oTd = document.createElement(“td”);oTr.appendChild(oTd);}oTable.appendChild(oTr);}document.body.appendChild(oTable);}//子元素插到末尾window.onload =function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){var oU1 = document.getElementById(“list”);var oTxt = document.getElementById(“txt”);var textNode = document.createTextNode(oTxt.value);var oLi = document.createElement(“li”);oLi.appendChild(textNode);oU1.appendChild(oLi);}}//子元素插到某个子元素之前window.onload =function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){var oU1 = document.getElementById(“list”);var oTxt = document.getElementById(“txt”);var textNode = document.createTextNode(oTxt.value);var oLi = document.createElement(“li”);oLi.appendChild(textNode);oU1.insertBefore(oLi, oU1.firstElementChild);}}//删除子元素window.onload =function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){var oU1 = document.getElementById(“list”);oU1.removeChild(oU1.lastElementChild);}}//复制元素window.onload =function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){var oU1 = document.getElementById(“list”);document.body.appendChild(oU1.cloneNode(1));}}//替换元素window.onload =function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){var oFirst = document.querySelector(“body *:first-child”);var oTag = document.getElementById(“tag”);var oTxt = document.getElementById(“txt”);var oNewTag = document.createElement(oTag.value);var oNewTxt = document.createTextNode(oTxt.value);oNewTag.appendChild(oNewTxt);document.body.replaceChild(oNewTag, oFirst);}}/*第十章：DOM进阶* *** 作HTML元素属性的方式：对象属性和对象方法* 不管是用那种方式，都需要涉及两个 *** 作：获取HTML属性值，设置HTML属性值* 一，获取HTML属性值：* 语法： obj.attr (obj是元素名，是一个DOM对象，指的是getElementById()* 等方法获取到的元素节点)* 二，设置HTML属性值： obj.attr = “值”;* 三，HTML属性 *** 作(对象方法)* 1，getAttribute()：获取元素的某个属性值* 2，setAttribute()：设置元素的某个属性值,参数1：属性名 参数2：属性值* 3，removeAttribute()：删除某个属性* 4，hasAttribute()：判断元素是否含有某个属性* 四，总结：* 1，“对象属性方式”和“对象方法方式”都可以 *** 作静态HTML的属性和动态DOM属性* 2，只有“对象方法方式”才可以 *** 作自定义属性** 五，CSS属性 *** 作：是指js *** 作一个元素的CSS样式* 1，获取CSS属性值：getComputeStyle(obj).attr <==> getComputeStyle(obj)[“attr”]* obj：DOM对象 attr：CSS属性名* 2，设置CSS属性值* (1)style对象：行内样式 语法：obj.style.attr=”值”* (2)cssText方法* 六，DOM遍历* 1，查找父元素：obj.parentNode obj:DOM对象* 2，查找子元素：* (1)childNodes,firstChild,lastChild* (2)children,firstElementChild,lastElementChild* 注：childNodes：获取所有节点包括文本节点 children：获取所有元素节点，不包括文本节点* 3，查找兄弟元素:* (1)previousSibling：查找前一个兄弟节点* (2)nextSibling：查找后一个兄弟节点* (3)previousElementSibling：查找前一个兄弟元素节点* (4)nextElementSibling：查找后一个元素节点* 七，innerHTML与innerText*///获取静态HTML中的属性值window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){alert(oBtn.id);}}//获取动态HTML中的属性值window.onload = function(){var oInput = document.createElement(“input”);oInput.id = “submit”;oInput.type = “button”;oInput.value = “提交”;document.body.appendChild(oInput);oInput.onclick = function(){alert(oInput.id);}}//获取单行文本框的值window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){var oTxt = document.getElementById(“txt”);alert(oTxt.value);//document.write(oTxt.value);}}//获取单选框的值window.onload = function(){var oBtn = document.getElementById(“btn”);var oFruit = document.getElementsByName(“fruit”);oBtn.onclick = function(){for(var i = 0; i < oFruit.length; i++){if(oFruit[i].checked){alert(oFruit[i].value);}}}}//获取复选框的值window.onload = function(){var oBtn = document.getElementById(“btn”);var oFruit = document.getElementsByName(“fruit”);var str = “”;oBtn.onclick = function(){for(var i = 0; i < oFruit.length; i++){if(oFruit[i].checked){str +=oFruit[i].value;}}alert(str);}}//获取下拉列表的值window.onload = function(){var oBtn = document.getElementById(“btn”);var oSelect = document.getElementById(“select”);oBtn.onclick = function(){alert(oSelect.value);}}//设置属性值window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){oBtn.value = “button”;document.write(oBtn.value);}}//获取固有属性值window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){alert(oBtn.getAttribute(“id”));}}//获取自定义属性值window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){//alert(oBtn.data);//oBtn.data是不能获取自定义属性值alert(oBtn.getAttribute(“data”));}}//获取自定义属性值window.onload = function(){var oTd = document.getElementsByTagName(“td”);for(var i = 0;i < oTd.length; i++){oTd[i].onclick = function(){var oParent = this.parentNode;oParent.style.color = “white”;oParent.style.backgroundColor = “red”;};}}//childNodes与children的比较window.onload = function(){var oU1 = document.getElementById(“list”);var childNodes = oU1.childNodes.length;var children = oU1.children.length;alert(“childNodes的长度：”+childNodes + “\n” +”children的长度：”+children);}/*第十一章：事件基础* 一，在js中一个事件分为三部分：* 1，事件主角：是按钮还是div元素或是其它？* 2，事件类型：是点击还是移动或其它？* 3，事件过程：这个事件都发生了些什么？* 二，js中常用的事件：* 1，鼠标事件* 2，键盘事件* 3，表单事件* 4，编辑事件* 5，页面事件* 三，js中事件调用方式：* 1，在script标签中调用：指的是在<script><script/>标签内调用事件* 语法： obj.事件名 = function(){};* 2，在元素中调用：指的是直接HTML属性中调用事件* 四，鼠标事件* onclick 鼠标单击事件* onmouseover 鼠标移入事件* onmouseout 鼠标移出事件* onmousedown 鼠标按下事件* onmouseup 鼠标松开事件* onmousemove 鼠标移动事件* 五，键盘事件* 1，键盘按下：onkeydown* 2，键盘松开：onkeyup* 注：指按下或松开的一瞬间，先有按下后有松开* 键盘事件一般用途：表单 *** 作和动画控制* 六，表单事件* 1，onfocus：获取焦点时触发的事件 onblur：获取失去焦点时触发的事件* 注：只有超链接和表单元素（单选框，多选框，单行文本框，多行文本框，下拉列表）才有上述功能* 备注：判断一个元素是否有焦点的方法：* 打开一个页面后按tab键，能够选中的就是具有焦点特性的元素* 焦点事件（onfocus，onblur）一般用于单行文本框和多行文本框* 2，onselect：当我们选中单行/多行文本框中内容时就会触发该事件* 3，onchange：常用于具有多个选项的表单元素：* (1)单选框选择某一项时触发* (2)多选框选择某一项时触发* (3)下拉列表选择某一项时触发* 4，submit（一般结合后端技术使用，此处暂时不管）* 七，编辑事件(一般用于保护版权)* 1，oncopy：可以用于页面内容被复制* 2，onselectstart：可以用于防止页面内容被选取：本质上是防止页面内容被复制* 3，oncontexmenu* 八，页面事件* 1，onload：表示文档加载完成后再执行的一个事件* window.onload：一般用于在想要获取页面中某一个元素的时候才会用到* 2，onbeforeunload：表示离开页面之前触发的一个事件*///鼠标移入移出window.onload = function(){var oP = document.getElementById(“content”);oP.onmouseover = function(){this.style.color = “red”;}oP.onmouseout = function(){this.style.color = “yellow”;}}//鼠标按下松开window.onload = function(){var oDiv = document.getElementById(“title”);var oBtn = document.getElementById(“btn”);oBtn.onmousedown = function(){oDiv.style.color = “red”;}oBtn.onmouseup = function(){oDiv.style.color = “blue”;}oBtn.onmousemove = function(){oDiv.style.color = “green”;}}//统计输入字符的长度（键盘按下松开实验）window.onload = function(){var oTxt = document.getElementById(“txt”);var oNum = document.getElementById(“num”);oTxt.onkeyup = function(){var str = oTxt.value;oNum.innerHTML = str.length;}}//统计输入字符的长度（键盘按下松开实验）window.onload = function(){var oTxt = document.getElementById(“txt”);var oDiv = document.getElementById(“content”);var myregex = /^[0-9]*$/;oTxt.onkeyup = function(){if(myregex.test(oTxt.value)){oDiv.innerHTML = “输入正确”;}else{oDiv.innerHTML = “必续输入数字”;}}}//搜索框（焦点的应用）window.onload = function(){var oSearch = document.getElementById(“search”);oSearch.onfocus = function(){if(this.value == “逗比小憨憨”){this.value = “”;}};oSearch.onblur = function(){if(this.value == “”){this.value = “逗比小憨憨”;}};}//focus方法:onfocus是一个属性window.onload = function(){var oTxt = document.getElementById(“txt”);oTxt.focus();}//onselect事件window.onload = function(){var oTxt1 = document.getElementById(“txt1”);var oTxt2 = document.getElementById(“txt2”);oTxt1.onselect = function(){alert(“你选中了单行文本框中的内容”);}oTxt2.onselect = function(){alert(“你选中了多行文本框中的内容”);}}//select方法：当使用搜索框时，每次点击搜索框，它就会帮我们自动选中文本框中的所有内容window.onload = function(){var oSearch = document.getElementById(“search”);oSearch.onclick = function(){this.select();};}//onchange事件用于单选框window.onload = function(){var oFruit = document.getElementsByName(“fruit”);var oP = document.getElementById(“content”);for(var i = 0;i < oFruit.length; i++){oFruit[i].onchange = function(){if(this.checked){oP.innerHTML = “你选择的是: “+this.value;}}};}//onchange事件用于复选框window.onload = function(){var oFruit = document.getElementsByName(“fruit”);var oSel = document.getElementById(“sel”);for(var i = 0; i < oFruit.length; i++)alert(oFruit[i].value);oSel.onchange = function(){if(this.checked){for(var i = 0; i < oFruit.length; i++){oFruit[i].checked = true;}}else{for(var i = 0; i < oFruit.length; i++){oFruit[i].checked = false;}}};}//onchange事件用于下拉列表//选择下拉列表的某一选项时，触发的是onchange事件，而不是onselect事件；onselect事件仅仅当选择文本框中内容时才会触发window.onload = function(){var oList = document.getElementById(“list”);oList.onchange = function(){var link = this.options[this.selectedIndex].value;window.open(link);};}//oncopy事件的应用window.onload = function(){document.body.oncopy =function(){return false;}}//onselectstart事件的应用window.onload = function(){document.body.onselectstart =function(){return false;}}//oncontexmenu事件的应用window.onload = function(){document.body.oncontextmenu =function(){return false;}}//onload,onbeforeunload事件的应用window.onload = function(){alert(“doubi”);}window.onbeforeunload = function(e){e.returnValue = “你准备离开页面”;}/*第十二章:事件进阶* 在js中想要给元素添加一个事件，有两种方式：* 1，事件处理器：缺点：无法为一个元素添加多个相同事件* 2，事件监听器：优点：事件处理器的缺点；(可以添加多个相同事件)* 指定是使用addEventListener()方法为一个元素加事件（又称绑定事件）* 语法：obj.addEventListener(type,fn,false)* obj:DOM对象 type:是一个字符串，指的是事件类型，不需要加上on前缀* fn:是一个函数名或一个匿名函数 false:表示事件冒泡阶段调用* 3，解绑事件:obj.removeEventListener(type,fn,false)* 4，event对象：当一个事件发生的时候，这个事件有关信息都会临时保存到一个指定的地方，这个* 地方就是event对象。
对于每一个事件，都有一个对应的event对象。
* event对象的常用属性：* type: 事件类型* keyCode: 键码值* shiftKey: 是否按下shift键* ctrlKey: 是否按下ctrl键* altKey: 是否按下alt键** keyCode：获取按下的哪个键；语法：event.keyCode* 返回一个数值，常用的键值对照表：* W（上） 87* S（上） 83* A（上） 65* D（上） 68* 上箭头 38* 下箭头 40* 左箭头 37* 右箭头 39** this:* this是极其复杂，在事件 *** 作中，可以理解：哪个DOM对象（元素节点）调用了* this所在函数，那么this指向的就是哪个DOM对象*///例题window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.addEventListener(“click”, alterMes, false);function alterMes(){alert(“javascript”);}}//上述等价于下面程序window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.addEventListener(“click”, function(){alert(“javascript”);}, false);}//获取事件的类型window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(e){//e是一个变量名存储一个event对象//实际上每次调用一个事件的时候，js都会默认给这个事件函数加上一个隐藏的参数//这个参数就是event对象，一般来说，event事件是作为事件函数的第一个参数传入alert(e.type);}}//禁止shift，alt,ctrl键window.onload = function(){document.onkeydown = function(e){if(e.shiftKey || e.altKey || e.ctrlKey){alert(“禁止使用shift，alt,ctrl键”)}}}//获取上下左右方向键window.onload = function(){var oSpan = document.getElementsByTagName(“span”)[0];window.addEventListener(“keydown”,doubi,false);function doubi(e){switch(e.keyCode){case 38:case 87:oSpan.innerHTML = “上”;break;case 39:case 68:oSpan.innerHTML = “右”;break;case 40:case 83:oSpan.innerHTML = “下”;break;case 65:case 37:oSpan.innerHTML = “左”;break;default:oSpan.innerHTML = “”;break;}}}/*第十三章：window对象* 在js中一个浏览器的窗口就是一个window对象。
实际上每次打开一个页面时，浏览器都会自动为这个页面* 创建一个window对象。
window对象存放了这个页面的所有信息。
* window对象下的子对象：* document 文档对象，用于 *** 作页面元素* title* body* forms* images* links* location 地址对象，用于 *** 作URL地址* navigator 浏览器对象，用于获取浏览器版本信息* history 历史对象，用于 *** 作浏览历史* screen 屏幕对象，用于 *** 作屏幕宽度高度* 注：location等对象又称为BOM（browser object module浏览器对象模型）* 上述子对象可以看成window对象的属性** window对象常用的方法：* alert() 提示对话框* confirm() 判断对话框* prompt() 输入对话框* open() 打开窗口* close() 关闭窗口* setTimeout() 开启一次性定时器* clearTimeout() 关闭一次性定时器* setInterval() 开启重复性定时器* clearInterval() 关闭重复性定时器* 注：对于window对象来说，不管它的属性还是方法，都可以省略window前缀** 相关 *** 作：* 1，窗口 *** 作* (1)打开窗口：语法：window.open(url,target)* (2)关闭窗口：语法：window.close()* 2，对话框：* (1)alert(“提示文字”)：一般仅仅用于提示文字，在其换行使用：”\n”;无返回值* (2)confirm(“提示文字”)：用于不仅提示文字，还供确认;返回布尔值* (3)prompt(“提示文字”)：不仅提示文字，还能返回一个字符串* 3，定时器* (1)setTimeout(code,time)* 其中code：一段代码或一个函数或一个函数名 time：时间，单位ms，表示要过多长时间才执行code中的代码* (2)clearTimeout()* (3)setInterval(code,time)* (4)clearInterval()* 4，location对象* location对象的属性* href 当前页面地址 作用：获取或设置当前页面的地址* search 当前页面地址？后面的内容 作用：获取或设置当前页面的地址？后面的内容* 地址？后面的内容也叫做查询字符串(querystring)，一般用于数据库查询用的，而且大量用到* hash 当前页面地址#后面的内容 作用：获取或设置当前页面的地址#后面的内容* #一般用于锚点链接* 5，navigator对象：用于获取浏览器的类型* 语法：window.navigator.userAgent*///举例window.onload = function(){var oBtn = document.getElementById(“btn”);oBtn.onclick = function(){window.open(“http://www.baidu.com”,”_blank”);//在新窗口打开window.open(“http://www.baidu.com”,”_self”);//在当前窗口打开}}// *** 作空白窗口中的元素window.onload = function(){var oBtn = document.getElementsByTagName(“input”);var opener = null;oBtn[0].onclick = function(){opener = window.open();var strHtml = ‘<!DOCTYPE html>\<html>\<head>\<title></title>\</head>\<body>\<div>逗比小憨憨</div>\</body>\</html>’;opener.document.write(strHtml);};oBtn[1].onclick = function(){var oDiv = opener.document.getElementsByTagName(“div”)[0];oDiv.style.fontWeight = “bold”;oDiv.style.color = “hotpink”;};}//confirm对话框的使用window.onload = function(){var oBtn = document.getElementById(“btn1”);oBtn.onclick = function(){if(confirm(“确定要跳转到首页吗?”)){window.location.href = “http://www.baidu.com”;}else{document.write(“取消”);}};}//prompt对话框的使用window.onload = function(){var oBtn = document.getElementById(“btn1”);oBtn.onclick = function(){var name = window.prompt(“请输入您的名字:”);document.write(“欢迎来到<strong>”+name+”</strong>”);};}//setTimeout()的使用window.onload = function(){setTimeout(‘alert(“doubi”)’, 2000);}//setTimeout()的使用,其中code是一个函数window.onload = function(){setTimeout(‘alert(“doubi”)’, 2000);}////setTimeout()的使用,其中code是一个函数名window.onload = function(){setTimeout(alertMes, 2000);function alertMes(){alert(“doubixiaohanhan”);}}//clearTimeout()的使用window.onload = function(){var oBtn = document.getElementsByTagName(“input”);var timer = null;oBtn[0].onclick = function(){//alert(“你已点击开始定时按钮”);timer = setTimeout(alertMes, 5000);function alertMes(){alert(“doubixiaohanhan”);}};oBtn[1].onclick = function(){clearTimeout(timer);}}//setInterval()的使用var n = 10;window.onload = function(){var t = setInterval(countdown,1000);};function countdown(){if(n > 0){n–;document.getElementById(“num”).innerHTML = n;}}//setInterval()的使用,在图片轮播开发中特别有用window.onload = function(){var oBtn = document.getElementsByTagName(“input”);var oDiv = document.getElementsByTagName(“div”)[0];var colors = [“red”,”yellow”,”blue”,”green”,”purple”,”orange”];var time = null;var i = 0;oBtn[0].onclick = function(){clearTimeout(time);time = setInterval(function(){oDiv.style.backgroundColor = colors[i];i++;i = i%colors.length;},1000);};oBtn[1].onclick = function(){clearInterval(time);};}//href的使用window.onload = function(){var url = window.location.href;document.write(“当前页面地址：”+ url);window.setTimeout(code,3000);function code(){url = window.location.href = “http://www.baidu.com”;window.open(url);};}//navigator的使用window.onload = function(){//indexOf(用于查找某个字符串在字符串中首次出现的位置，如果找不到返回-1)if(window.navigator.userAgent.indexOf(“MSIE”) != -1){alert(“这是IE浏览器”);}else if(window.navigator.userAgent.indexOf(“Chrome”) != -1){alert(“这是谷歌浏览器”);}else if(window.navigator.userAgent.indexOf(“Firefox”) != -1){alert(“这是火狐浏览器”);}else;}/*第十四章：document对象* 浏览器会为每个窗口内的HTML页面自动创建一个document对象* 一，document对象常用的属性* document.title 获取文档的title* document.body 获取文档的body* document.forms 获取文档的forms* document.images 获取文档的images* document.links 获取文档的links* document.cookie 获取文档的cookie* document.URL 获取文档的URL* document.referrer 获取文档的referrer:获取用户在访问当前页面* 之前所在的页面地址，可以统计用户都是通过什么方式来访问页面的* 其中：使用document.getElementByTagName(“forms/img/a”) *** 作* forms、images、links* 二，document对象常用的方法* document.getElementById() 通过id获取元素* document.getElementByTagName() 通过标签名获取元素* document.getElementByClassName() 通过class获取元素* document.getElementByName() 通过name获取元素* document.querySelector() 通过选择器获取元素，只获取第一个* document.querySelectorAll() 通过选择器获取元素，获取所有* document.createElement() 创建元素节点* document.createTextNode() 创建文本节点* document.write() 输出内容* document.writeln() 输出内容并换行*///获取urlwindow.onload = function(){var url = document.URL;document.write(url);}//输出内容并换行window.onload = function(){var url = document.URL;document.writeln(url);document.writeln(“doubixiaohanhan”);}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）