DOM对象模型
 DOM(Document Object Model),是指文档对象模型,是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型。
【DOM树节点】
   DOM节点分为三大类:元素节点,文本节点,属性节点:
  文本节点,属性节点为元素节点的两个子节点;
  通过getElment系列方法,可以去到元素节点;
【查看节点】
1.getElementById:通过id获取唯一的节点;多个同名ID只会取到第一个;
2.etElementByName:通过name取到一个数组,包含1到多个节点;
   使用方式:通过循环取到每个节点,循环次数,从0开始<数组.length
   [查看设置属性节点]
  1.查看属性节点:getAttribute("属性名")
   2.设置属性节点:setAttribute("属性名""属性值")*/
   【js修改样式总结】
 1、.className:为元素设置一个新的clas名字;
     div1.className="class1";
2、.style:为元素设置新的样式,注意驼峰命名法;
    div1.style.backgroundColor="red";
3、.style.cssText:为元素同时修改多个样式;
    div1.style.cssText="width:100px;height:100px";
     [查看节点]
1.tagname:获取节点的标签名;
2.innerHTML:设置或者获取节点内部的所有HTML代码;
3.innerText:设置或者获取节点内部的所有文字;
              获取行内样式的方法:var div=document.getElementsByTagName("div");
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DOM代码详述(一)</title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. window.onload = function(){
  10. var div1 = document.getElementById("div1");//通过ID获取唯一的节点;多个同名ID只会取第一个
  11. console.log(div1);
  12.  
  13. console.log(div1.tagName);//查看节点:①属性;获取节点的标签名
  14. console.log(div1.innerHTML);//②设置或者获取节点内部的所有HTML代码
  15. console.log(div1.innerText);//③设置或者获取节点内部的所有文字
  16.  
  17. console.log(window.getComputedStyle(div1,null));//查看所有属性(非IE属性)
  18. console.log(div1.currentStyle);//查看所有属性(IE属性)
  19.  
  20. }
  21. function getById(){
  22. //取到元素节点的样式属性节点
  23. var div1 = document.getElementById("div1").style;//获取
  24. div1.backgroundColor = "#FF00FF";//行级样式表权重1000;所有节点属性,一律驼峰命名法
  25.  
  26. //取到元素节点
  27. var divDoc = document.getElementById("div1");//获取
  28. divDoc.innerHTML = "<s>king_land</s>";//重置修改div中的HTML代码
  29. }
  30.  
  31. //——————————————分割线——————————————————
  32.  
  33. function getByName(){//通过Name取到一个数组,包含1到多个节点;
  34.  
  35. var div = document.getElementsByName("div1");
  36.  
  37. console.log(div.length);
  38.  
  39. //使用方式:通过循环,取到每一个节点,循环次数从0开始,<数组.length
  40. for(var n = 0 ;n < div.length ; n++){
  41. div[n].style.backgroundColor = "#FFFF00";
  42. }
  43.  
  44. //div1.backgroundColor = "#FFFF00";
  45. //div[0].style.backgroundColor = "#FFFF00";//★
  46.  
  47. }
  48.  
  49. //——————————————分割线——————————————————
  50.  
  51. //document.getElementsByTagName();//同Name
  52.  
  53. function getByTagName(){
  54.  
  55. var div = document.getElementsByTagName("div");
  56.  
  57. div[0].style.backgroundColor = "#00FF00";
  58.  
  59. }
  60.  
  61. //——————————————分割线——————————————————
  62.  
  63. //document.getElementsByClassName();//同Name
  64.  
  65. function getByClass(){
  66.  
  67. var div = document.getElementsByClassName("div1");
  68.  
  69. div[0].style.backgroundColor = "#00FFFF";
  70.  
  71. }
  72. //——————————————分割线——————————————————
  73.  
  74. function getAttr () {
  75.  
  76. var img1 = document.getElementById("img1");
  77. alert(img1.getAttribute("src"));
  78.  
  79. }//查看属性节点 getAttribute("属性名");
  80.  
  81. //——————————————分割线——————————————————
  82.  
  83. function setAttr () {
  84.  
  85. var img1 = document.getElementById("img1");
  86. img1.setAttribute("src","../../2-CSS基础语法/img/bg_flower_multi.gif");
  87. img1.setAttribute("style","width: 100px;height: 100px;");
  88.  
  89. }//设置属性节点 getAttribute("属性名","属性值");
  90.  
  91. //——————————————分割线——————————————————
  92.  
  93. //JS修改样式总结
  94. //1、.className:为元素设置一个新的class名字 例如:div1.className = "div2";
  95. //2、.style:为元素设置新的样式 例如:div1.style.background-color = "blue";
  96. //3、.style.cssText:为元素同时修改多个样式 例如:div1.style.cssText = "width:100px;height:200px;";
  97.  
  98. </script>
  99.  
  100. <style type="text/css">
  101.  
  102. .div1{
  103. height: 100px;
  104. width: 100px;
  105. background-color: #000000;
  106. color: #FFFFFF;
  107. line-height: 100px;
  108. text-align: center;
  109. }
  110.  
  111. </style>
  112.  
  113. </head>
  114. <body>
  115.  
  116. <div id="div1" name="div1" class="div1">
  117. 这里是测试区
  118. </div>
  119. <div id="div1" name="div1" class="div1">
  120. 这里是测试区
  121. </div>
  122. <div id="div1" name="div1" class="div1">
  123. 这里是测试区
  124. </div>
  125. <img src="../../2-CSS基础语法/img/bg_flower_multi.gif" id="img1"/>
  126.  
  127. <br />
  128. <button onclick="getById()">通过ID修改divcolor</button>
  129. <br />
  130. <button onclick="getByName()">通过Name修改divcolor</button>
  131. <br />
  132. <button onclick="getByTagName()">通过TagName修改divcolor</button>
  133. <br />
  134. <button onclick="getByClass()">通过ClassName修改divcolor</button>
  135. <br />
  136. <button onclick="getAttr()">取到img的src属性值</button>
  137. <br />
  138. <button onclick="setAttr()">修改img的src属性值</button>
  139.  
  140. </body>
  141. </html>

[获取层次节点的常用属性]:

  1、.childNodes:(数组)获取元素的所有子节点(元素节点:子标签、文本节点);
   2、 .firstChild:获取元素的第一个子节点;
   3、.lastChild:获取元素的最后一个子节点;
   4、.ownerDocument:获取当前文档根节点,在html中,为doucument节点;
   5、.parentNode::获取当前文档父节点;
   6、.previousSibling:获取当前节点的前一个兄弟节点
   7、.nextSibling:获取当前节点的后一个兄弟节点;
    8、.attributes:获取当前节点的所有属性节点;
【注意】:上述属性均会获得所有元素节点和文本节点,如果只需要元素节点,需要使用对应的Element属性,例如: .firstChild->.firstElementChild
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. window.onload = function (){
  10.  
  11. //获取层次节点的常用属性
  12.  
  13. var ul1 = document.getElementById("ul1");
  14.  
  15. // var lis = ul1.getElementsByTagName("li"); //只取到ul1中所有li
  16. // var lis = document.getElementsByTagName("li"); //取到页面中所有的li
  17.  
  18. console.log(ul1.childNodes);//获取元素的所有子节点(包含元素节点、文本节点)
  19.  
  20. console.log(ul1.firstChild);//获取元素的第一个子节点
  21.  
  22. console.log(ul1.lastChild);//获取元素的最后一个子节点
  23.  
  24. console.log(ul1.ownerDocument);//获取当前文档根节点,在html文档中为document节点
  25.  
  26. console.log(ul1.parentNode);//获取当前节点的父节点
  27.  
  28. console.log(ul1.previousSibling);//获取当前节点的前一个兄弟节点
  29.  
  30. console.log(ul1.nextSibling);//获取当前节点的后一个兄弟节点
  31.  
  32. //上述属性均会获得所有的元素节点和文本节点,如果只需要元素节点,需要使用对应Element属性,例如:firstChild→firstElementChild
  33.  
  34. console.log(ul1.attributes);//获取当前节点的所有属性节点
  35.  
  36. }
  37.  
  38. //——————————————创建并新增节点——————————————————
  39.  
  40. //方法一:.creatElement("标签名")创建一个新节点,需要配合setAttribute()方法设置属性;
  41. //方法二:.appendChild(节点名)在元素的最后追加一个新节点
  42. //方法三:.insertBefore(新节点名,目标节点名):将新节点插入到目标节点之前
  43. //方法四:克隆对象.cloneNode(true/false):需要克隆谁,就用谁去调用克隆节点;传递参数可以为true/false,true表示克隆当前节点及子节点;false表示只克隆当前节点,不克隆子节点。
  44.  
  45. function appendImg(){
  46.  
  47. //1、创建一个图片节点
  48. var img = document.createElement("img");
  49. //2、给img节点设置属性
  50. img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
  51. //3、将设置好的img节点追加到body最后
  52. document.body.appendChild(img)//.setAttribute("src","../../img/2017-02-25_143342.png");
  53.  
  54. }
  55.  
  56. function insertImg(){
  57.  
  58. //1、创建一个图片节点
  59. var img = document.createElement("img");
  60. //2、给img节点设置属性
  61. img.setAttribute("src","../../1-HTML基本标签/ivicon.png");
  62. //3、在两个ul之间插入图片
  63. var ul2 = document.getElementById("ul2");
  64. document.body.insertBefore(img,ul2);
  65.  
  66. }
  67. var count = 2;
  68. function copyUl(){
  69.  
  70. //1、取到ul2节点
  71. var ul2 = document.getElementById("ul2");
  72. //2、克隆节点
  73. var ul2Clon = ul2.cloneNode(true);
  74. count ++;
  75. ul2Clon.setAttribute("id","ul"+count)
  76. //3、在原ul2节点之前,插入新克隆节点
  77. document.body.insertBefore(ul2Clon,ul2);
  78.  
  79. }
  80.  
  81. //——————————————删除和替换节点——————————————————
  82.  
  83. //1、.removeChild(需删除节点):从父容器中删除指定节点;
  84. //2、.replaceChild(新节点,被替换节点):用新节点替换被指定节点,如果新节点为页面中已有节点,会将此节点删除后替换到指定节点。
  85.  
  86. function deleteUl1(){
  87.  
  88. //取到ul1
  89. var ul1 = document.getElementById("ul1");
  90. if (ul1){
  91. //从父容器body中删除ul1节点
  92. document.body.removeChild(ul1);
  93. }else{
  94. alert("憋删了,早没了");
  95. }
  96.  
  97. }
  98.  
  99. function ul1ReplaceUl2(){
  100.  
  101. var div = document.createElement("div");
  102. div.setAttribute("style","width: 100px;height: 100px;background-color: #20B2AA;");
  103. var ul2 = document.getElementById("ul2");
  104. document.body.replaceChild(div,ul2);
  105.  
  106. }
  107.  
  108. </script>
  109.  
  110. <style type="text/css">
  111.  
  112. ul{
  113. width: 600px;
  114. list-style: none;
  115. padding: 0;
  116. background-color: #20B2AA;
  117. display: flex;
  118. justify-content: space-around;
  119. margin-top: 20px;
  120. }
  121.  
  122. </style>
  123.  
  124. </head>
  125. <body>
  126.  
  127. <ul id="ul1">
  128. <li>第一项</li>
  129. <li>第二项</li>
  130. <li>第三项</li>
  131. <li>第四项</li>
  132. </ul>
  133.  
  134. <ul id="ul2">
  135. <li>第1项</li>
  136. <li>第2项</li>
  137. <li>第3项</li>
  138. <li>第4项</li>
  139. </ul>
  140.  
  141. <button onclick="appendImg()">在最后插入一幅图片</button>
  142. <button onclick="insertImg()">在两个ul之间插入一幅图片</button>
  143. <button onclick="copyUl()">copy一个ul2</button>
  144. <br />
  145.  
  146. <button onclick="deleteUl1()">删除ul1</button>
  147. <button onclick="ul1ReplaceUl2() ">用ul1替换ul2</button>
  148.  
  149. </body>
  150. </html>

[创建新增节点]:

1、.createElement("标签名"):创建一个新的节点,需要配合.setAttribute()方法设置新节点的相关属性;
2、.appendChild(节点名):在某元素的最后追加一个新节点;
3、.insertBefore(新节点名,目标节点名):将新节点插入到目标节点之前
4、克隆节点 .cloneNode(true/false):需要克隆谁,就用谁去调用克隆对象;
    传递参数可以是(true/false);
    true:为科隆当前节点和所有子节点;
    false:之科隆当前节点,不克隆子节点(默认);
[删除替换节点]
1、.removeChild(需删除节点):从父容器中,删除指定节点;
2、.replaceChild(,新节点,被替换节点):用新节点替换指定节点,如果新节点为页面中已有节点会删除后替换指定节点
function deleteUl1(){
//取到ul1
var ul1=document.getElementById("ul1");
//从ul的父容器删除ul1
if(ul1){
document.body.removeChild(ul1);
}else{
alert("ul1已经不存在");
}
}
 
【表格对象】
1、rows属性:返回表格中的所有行,数组;
2、insertRow(index):在表格的第index+1行,插入新行;
3.deleteRow():删除表格的第index+1行;
 
【表格行对象】:
  1、cells属性:返回表格中的所有行,数组;
  2、rowIndex:返回当前行,在表格中的索引顺序,从0开始;
  3、indexCell(index):在表格的第index+1处插入一个<td>;
  4、deleteCell(index):删除当前行的第index+1个<td>;
 
  【表格的单元格对象】:
  1.cellIndex属性:返回单元格在该行的索引顺序,从0开始;
  2、innerHTML属性:返回或设置当前单元格中的HTML代码;
  3、align属性:设置当前单元格的水平对齐方式;
  4、claaName属性:设置单元格的class属性;
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>DOM操作表格</title>
  6.  
  7. <script type="text/javascript">
  8.  
  9. //表格对象:
  10. //1、rows属性:返回表格中的所有行,数组;
  11. //2、insertRow(index):在表格的第index+1行,插入一个新行;
  12. //3、deleteRow(index):删除表格的第index+1行;
  13.  
  14. //表格的行对象:
  15. //1、cells属性:返回当前行中的所有单元格,数组;
  16. //2、rowIndex属性:返回当前行在表格中的索引顺序,从0开始;
  17. //3、insertCell(index):在当前行的index+1处插入一个td;
  18. //4、deleteCell(index):删除当前行的第index+1个td;
  19.  
  20. //表格的单元格对象:
  21. //1、cellIndex属性:返回单元格在该行的索引顺序,从0开始;
  22. //2、innerHTML属性:设置或者返回当前单元格中的HTMl代码;
  23. //3、align(valign)属性:设置当前单元格的水平对齐方式;
  24. //4、className属性:设置单元格的class名称。
  25.  
  26. function newRow(){
  27.  
  28. var book = prompt("书名:");
  29. var price = prompt("价格:");
  30.  
  31. var table = document.getElementsByTagName("table");
  32. //在表格的最后一行插入一个新行
  33. var newRow = table[0].insertRow(table[0].rows.length-1);
  34. //给新行设置单元格
  35. var cell0 = newRow.insertCell(0);
  36. cell0.innerHTML = book;
  37. var cell1 = newRow.insertCell(1);
  38. cell1.innerHTML = price;
  39.  
  40. getSum();
  41.  
  42. }
  43.  
  44. function deleteRow(){
  45.  
  46. var table = document.getElementsByTagName("table");
  47. if(table[0].rows.length>2){
  48. table[0].deleteRow(table[0].rows.length-2);
  49. }else{
  50. alert("删删删!删你妹啊删!")
  51. }
  52. getSum();
  53. }
  54.  
  55. function changeTitle(){
  56.  
  57. var color = prompt("请输入6位十六进制颜色值:");
  58. var table = document.getElementsByTagName("table");
  59. table[0].rows[0].style = "background-color:#"+color;
  60.  
  61. }
  62.  
  63. function copyRow(){
  64.  
  65. var table = document.getElementsByTagName("table");
  66. var copyRow = table[0].rows[table[0].rows.length-2].cloneNode(true);
  67. var heJi = table[0].rows[table[0].rows.length-1];
  68. //由于浏览器,自动将表格的<tr>包裹在<tbody>中
  69. //所以<tr>实际并非<table>的子节点,故需取到<table>中的<tbody>进行插入;
  70.  
  71. if(table[0].rows.length>2){
  72. table[0].getElementsByTagName("tbody")[0].insertBefore(copyRow,heJi);
  73. }else{
  74. alert("没有可以复制的行");
  75. }
  76. getSum();
  77. }
  78.  
  79. function getSum(){
  80. //取到当前表格 表格所有行
  81. var table = document.getElementsByTagName("table");
  82. var rows = table[0].rows;
  83. //
  84. if(rows.length<=2){
  85. rows[rows.length-1].cells[1].innerText = 0 + "元";
  86. alert("没有可计算的行!");
  87. return;
  88. }
  89. //求和
  90. var sum = 0 ;
  91.  
  92. for(var i = 1 ; i <= rows.length-2 ; i++){//第0行与最后一行舍弃1 rows.length-2
  93.  
  94. var cells = rows[i].cells;//取到单元格
  95. sum += parseFloat(cells[cells.length-1].innerText);//最后一个单元格的 内容(innerText) 转化成数字并求和计算!
  96.  
  97. }
  98.  
  99. rows[rows.length-1].cells[cells.length-1].innerText = sum.toFixed(2) + "元";
  100.  
  101. }
  102.  
  103. window.onload = function(){
  104. getSum();
  105. }
  106.  
  107. </script>
  108.  
  109. <style type="text/css">
  110.  
  111. table{
  112. border-collapse: collapse;
  113. width: 400px;
  114. text-align: center;
  115. color: #585858;
  116. }
  117. td,th{
  118. border: 1px solid #8B8A8B;
  119. }
  120. table tr:last-child{
  121. color: #E70014;
  122. }
  123.  
  124. </style>
  125.  
  126. </head>
  127. <body>
  128.  
  129. <table>
  130. <tr>
  131. <th>书名</th>
  132. <th>价格</th>
  133. </tr>
  134. <tr>
  135. <td>看得见风景的房间</td>
  136. <td>30.00元</td>
  137. </tr>
  138. <tr>
  139. <td>幸福从天而降</td>
  140. <td>18.50元</td>
  141. </tr>
  142. <tr>
  143. <td>60个瞬间</td>
  144. <td>32.00元</td>
  145. </tr>
  146. <tr>
  147. <td>合计</td>
  148. <td></td>
  149. </tr>
  150. </table>
  151.  
  152. <br />
  153.  
  154. <button onclick="newRow()">增加一行</button>
  155. <button onclick="deleteRow()">删除最后一行</button>
  156. <button onclick="changeTitle()">修改标题样式</button>
  157. <button onclick="copyRow()">复制最后一行</button>
  158.  
  159. </body>
  160. </html>
                             BOM(Browser Object Model) 是指浏览器对象模型
【screen对象】
console.log(screen);
console.log(screen.width);   //屏幕宽度;
console.log(screen.height);    //屏幕高度;
console.log(screen.availWidth);//屏幕可用宽度;
console.log(screen.availHeight);//屏幕可用高度=屏幕高度-底部任务栏高度;
 
 
 location对象

  location完整的URL路径:
  1.协议://主机名(IP地址):端口号(默认80端口)/文件路径?传递参数(参数名=参数值name1=value1&name2=value2)#锚点*/
console.log(location.href);//完整路径
console.log(location.protocol);//使用的协议http:https:ftp:file:mailto:
console.log(location.pathname);//文件路径
console.log(location.port);//端口号
console.log(location.search);//从?开始的部分
console.log(location.hostname);//主机名(IP地址)
console.log(location.host);//主机名+端口号
console.log(location.hash);//从#开始的锚点
window.location="http://www.baidu.com";//使用JS跳转页面
function locationAssign(){
location.assign("http://www.baidu.com");
加载新文档,加载之后,可以回退;
}
function locationReplace(){
location.replace("http://www.baidu.com");
使用新的文档,替换当前文档,替换之后不能回退;
}
function locationReload(){
重新加载当前页面
reload(true):从服务器重新加载页面
reload():在本地刷新当前页面*/
        location.reload(true);
}
console.log(history.length);
浏览历史列表的个数
history.forward();前进到前一个页面;
  history.back();前进到后一个页面;
  history.go(-1);跳转到任意页面:前一个页面为第一个,后一个页面为-1个
Navigator 了解
console.log(navigator.appName); //产品名称
console.log(navigator.appVersion); //产品版本号
console.log(navigator.userAgent); //用户代理信息
console.log(navigator.platform); //系统平台
navigator.plugins。返回一个数组,检测浏览器安装的所有插件
>>>主要的属性:
description:插件的描述信息
        filename:插件在本地磁盘的文件名
        length:插件的个数
name:插件名
console.log(navigator.plugins);//检查浏览器安装的插件信息
navigator.mimeTypes 浏览器插件,所支持的文件类型
>>>主要属性
description:MIME类型描述
enabledPlugin:支持此类型的浏览器插件
suffixes:此类型可能的后缀名
type:MIME类型的写法,例如: image/x-icon text/css
console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型
 
【重点】window对象的常用方法:
>>>window对象中的所有方法,均可以省略前面的window,比如close();
                1.prompt:弹窗接受用户输入;
                2.alert:弹窗警告;
                3.confirm:带有确认/取消按钮的提示框;
                4.close:关闭窗口;
                5.open:重新打开一个窗口,传入参数URL/窗口名称/窗口特征;
                6.setTimeout:设置延时执行,只会执行一次;
                7.setInterval:设置定时器,循环每个N毫秒执行一次;
                         两个参数:需要执行的function/毫秒
                8.clearTimeout:清除延时;
                9.clearInterval:清除定时器
传入参数:调用setInterval时返回一个ID,通过变量接受ID,传入clearInterval;
 在这九种方法中,最常用到也是这里面最麻烦的四种是setTimeout/clearTimeout和setInterval/clearInterval,它们两两对应,常放在一起搭配使用。下面就给大伙举一个这方面的栗子~

(栗子:setTimeout/clearTimeout)

(栗子:setInterval/clearInterval)

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>首先是setTimeout与clearTimeout</title>
  6. <!--要记得首先打开控制台哟~-->
  7. <script type="text/javascript">
  8.  var timeoutid = setTimeout(function(){
  9. console.log("setTimeout");
  10. },5000) ;
  11. function clearTimeoutBtn(){
  12. clearTimeout(timeoutid);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <button onclick="clearTimeoutBtn()">clearTimeout</button>
  18. </body>
  19. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>然后是setInterval与clearInterval</title>
  6. <!--要记得首先打开控制台哟~-->
  7. <script type="text/javascript">
  8. var num = 10;
  9. var timeinterval = setInterval(function(){
  10. num--;
  11. console.log(num);
  12. if (num==0){
  13. clearInterval(timeinterval);
  14. }
  15. },1000)
  16. function clearIntervalBtn(){
  17. clearInterval(timeinterval);
  18. }
  19. </script>
  20. </head>
  21. <body>
  22. <button onclick="clearIntervalBtn()">clearIntervar</button>
  23. </body>
  24. </html>

                                                                              js事件模型
1 DOM0事件模型
1.1 内联模型:直接将函数名作为HTML标签的某个事件属性的属性值;         栗子 <button onclick="func()"></button>         缺点:违反了W3C关于HTML与JS分离的基本原则!

1.2 脚本模型:在JS脚本中通过事件属性进行绑定;         栗子 window.onload = function(){}         局限性:同一节点只能绑定一个同类型事件;

2 DOM2事件模型(后面有栗子!)

优点:同一节点,可以添加多个同类型事件的监听器;

①添加事件绑定: IE10之前:btn1.attachEvent("onclick",函数); 其他浏览器:btn1.addEventListener("click",函数,true/false); true:表示事件捕获;false(默认):表示事件冒泡 兼容写法:if(btn1.attackEvent){btn1.attachEvent("onclick",函数);}else{btn1.addEventListener("click",函数,true/false);}
②取消事件绑定: .detachEvent("onclick",函数名); .removeEventListener("click",函数名); 注:如果取消时间帮顶,回调函数必须使用有名函数,而不能使用匿名函数。因为在取消事件帮顶时,需要传入函数名;

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>这里是栗子</title>
  6.  
  7. <script type="text/javascript">
  8. window.onload = function (){
  9.  
  10. var btn1 = document.getElementById("btn1");
  11. function func1(){
  12. alert(1);
  13. }
  14. function func2(){
  15. alert(2);
  16. }
  17. btn1.addEventListener("click",func1,false);
  18. btn1.addEventListener("click",func2,false);
  19.  
  20. var btn2 = document.getElementById("btn2");
  21. btn2.addEventListener("click",function(){
  22. btn1.removeEventListener("click",func1);
  23. },false);
  24.  
  25. }
  26. </script>
  27. </head>
  28. <body>
  29.  
  30. <button id="btn1">点我会弹窗!</button>
  31.  
  32. <br /><br />
  33.  
  34. <button id="btn2">点我不弹窗!</button>
  35. </body>
  36. </html>

     JS中的事件流

1 事件冒泡

当某DOM元素触发某事件时,会从当前DOM元素开始,逐个触发其祖先元素的同类型事件,直到DOM根节点; DOM0事件流均为事件冒泡; IE中使用.attachEvent()事件,均为冒泡; 其他浏览器.addEventListener()添加的事件,当第三个参数为false时,为冒泡。

2 事件捕获

当某DOM元素触发某事件时,会从DOM根节点,逐个触发其祖先元素的同类型事件,直到触发到当前DOM元素开始;

只有使用.addEventListener()添加的事件,并且当第三个参数为true时,才进行捕获。

3 阻止事件冒泡

IE浏览器:将e.cancelBubble属性设为true; 其他浏览器:调用e.stopPropagation();方法

4 取消事件默认行为

IE浏览器:将e.returnValue属性设为false; 其他浏览器:调用e.preventDefault(); 方法

(这里有栗子):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>事件流举栗</title>
  6. <style type="text/css">
  7.  
  8. #div1{
  9. width: 200px;
  10. height: 200px;
  11. background-color: #20B2AA;
  12. color: #FFFFFF;
  13. font-size: 20px;
  14. font-weight: 700;
  15. }
  16. #div2{
  17. width: 100px;
  18. height: 100px;
  19. background-color: #436690;
  20. color: #FFFFFF;
  21. font-size: 20px;
  22. font-weight: 700;
  23. }
  24. #div3{
  25. width: 50px;
  26. height: 50px;
  27. background-color: #4E2E83;
  28. color: #FFFFFF;
  29. font-size: 20px;
  30. font-weight: 700;
  31. }
  32.  
  33. </style>
  34.  
  35. </head>
  36. <body>
  37. <div id="div1">
  38. <div id="div2">
  39. <div id="div3">3</div>
  40. </div>
  41. </div>
  42.  
  43. <a href="../07 JS中的DOM/笔记.html" onclick="stopHref()">跳转页面</a>
  44. </body>
  45.  
  46. <script type="text/javascript">
  47. var div1 = document.getElementById("div1");
  48. var div2 = document.getElementById("div2");
  49. var div3 = document.getElementById("div3");
  50.  
  51. div1.addEventListener("click",function(e){
  52. handleE();
  53. console.log("div1触发了click事件");
  54. },false);
  55.  
  56. div2.addEventListener("click",function(e){
  57. handleE();
  58. console.log("div2触发了click事件");
  59. },false);
  60.  
  61. div3.addEventListener("click",function(e){
  62. handleE();
  63. console.log("div3触发了click事件");
  64. },false);
  65.  
  66. function handleE(e){
  67. var evn = e||window.event;
  68. evn.stopPropagation();
  69. }
  70. function stopHref(e){
  71.  
  72. e = e||window.event;
  73. if (e.preventDefault) {
  74. e.preventDefault(); //IE以外
  75. } else {
  76. e.returnValue = false; //IE
  77. }
  78.  
  79. alert("好气呀!");
  80.  
  81. }
  82.  
  83. </script>
  84.  
  85. </html>
 
 
 
 
 
 
 
 
 

细看JS中的BOM、DOM对象的更多相关文章

  1. JavaScript BOM DOM 对象

    title: JavaScript BOM DOM 对象 tags: JavaScript --- browser object model document onject model BOM对象 w ...

  2. JS中遍历数组、对象的方式

    1.标准的for循环遍历数组 //不打印自定义属性和继承属性 var array = [1,2,3]; for (var i = 0; i < array.length; i++) { cons ...

  3. js中内置有对象

    statpot:使用mongo+bootstrap+highcharts做统计报表 最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求 ...

  4. JS中的内置对象简介与简单的属性方法

    JS中的数组: 1.数组的概念: 数组是在内存中连续存储的多个有序元素的结构,元素的顺序称为下标,通过下标查找对应元素 2.数组的声明: ①通过字面量声明var arr1 = [,,,,] JS中同一 ...

  5. JavaScript -- 时光流逝(六):js中的正则表达式 -- RegExp 对象

    JavaScript -- 知识点回顾篇(六):js中的正则表达式 -- RegExp 对象 1. js正则表达式匹配字符之含义      查找以八进制数 规定的字符.     查找以十六进制数 规定 ...

  6. JS BOM DOM对象 select联动 计时器 时间 css操作 节点(标签 ) 查找标签 {前端基础之BOM和DOM}

    前端基础之BOM和DOM 前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我 ...

  7. js下 Day01、DOM对象,BOM浏览器对象模型

    一.初识DOM 1.什么是DOM?为什么学习DOM 2.DOM是实现js在网页实现交互的关键环节,我们的js代码就是通过DOM的方法来实现对于html内容的操作. 3.认识DOM实现了js和网页结合的 ...

  8. js中的BOM对象

    浏览器对象模型(BOM)以 window 对象为依托,表示浏览器窗口以及页面可见区域.同时, window对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性, ...

  9. js中__proto__, property, prototype, 对象自身属性方法和原型中的属性方法的区别

    __proto__: 这个属性是实例对象的属性,每个实例对象都有一个__proto__属性,这个属性指向实例化该实例的构造函数的原型对象(prototype). proterty:这个方法是对象的属性 ...

随机推荐

  1. centos mail使用外部SMTP发送邮件

    1.安装mailx yum install mailx -y 安装好后,编辑配置文件 mailx -V 12.4 7/29/08  <<mailx的版本号 rpm -qc mailx /e ...

  2. CSS.06 -- 尚合网页模拟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. python3的urllib2报错问题解决方法

    python urlib2 兼容问题 在python3中,将urllib和urllib2合并了,所以在使用urllib2的地方改成urllib.request即可.示例如下 import urllib ...

  4. PHP和js实时倒计时

    <?php //这是t.php页面 header('content-type:text/html;charset=utf-8'); date_default_timezone_set('PRC' ...

  5. Android实战(一)学习了多个控件实现登录及记住密码功能

    首先确定一下需要的控件: 两个EditText:用于输入账号和密码 一个button:用于登录查看账号和密码是否正确 一个checkbox:用于记住密码和账户 一个Androidstudio:用于编写 ...

  6. 01.Nodejs入门之Helloworld

    说明:本文章可供有一定js基础的朋友参考nodejs入门,本文未讲解nodejs的安装,如有需要的同学可以加QQ3382260752找我,进行交流学习. 1.新建文件夹helloworld demo, ...

  7. 自动化监控利器-Zabbix深入配置和使用

    1.  配置流程 Zabbix完整的监控配置流程可以简单描述为: Host groups(主机组)→Hosts(主机)→Applications(监控项组)→Items(监控项)→Triggers(触 ...

  8. JSP的学习

    JSP的学习 1. (1).服务器的名字:Tomcat (2).服务器浏览器访问的地址为: http://localhost:8080 http://127.0.0.1:8080 2.简单的知识 (1 ...

  9. 实用开发之-oracle表回滚到一个指定时间的操作语句

    在开发或客户使用过程中,难免会出现误操作或脏数据,那么怎么迅速处理这个问题呢? 1.备份还原就用了,太麻烦. 就是使用ORACLE的备份功能,然后在还原,还原的时候新建一个库,然后使用dblink进行 ...

  10. 数字图像处理(MATLAB版)学习笔记(1)——第1章 绪言

    0.下定决心 当当入手数字图像处理一本,从此开此正式跨入数字图像处理大门.以前虽然多多少少接触过这些东西,也做过一些相关的事情,但感觉都不够系统,也不够专业,从今天开始,一步一步地学习下去,相信会有成 ...