前端_DOM&BOM

前端BOM

BOM:浏览器对象模型

window

　　alert：弹出信息框

alert(‘String‘)
// 或者
Window.alert("String")

　　confirm：弹出确认框，确定或取消；返回结果赋值给一个变量

var a=window.confirm("确定离开？")   // true or false

　　prompt：弹出输入框，用一个变量接受输入信息

var a=window.prompt("请输入：")

　　定时器：setTimeout或setInterval

setInterval                   // 多次定时器，间隔性执行
clearInterval                // 清除多次定时器
setTimeout                  // 单次定时器，设置定时器后，定时器后面的操作继续执行
clearTimeout                // 清除单次定时器 

window.setTimeout(function(){
       console.log(‘开始定时‘);
} ,1000)
console.log(‘继续执行‘)   // 无论定时器设置0还是1000毫秒，都先打印"继续执行"

var num=0;
var timer=null;
timer=setInterval(function(){
      num++;
      if(num>5){
          clearInterval(timer);
          return;
        }
       console.log(‘num:‘+num);
}, 1000);

location

location.host
location.hostname
location.href                  // 若赋值一个新的url(location.href=‘www.baidu.com‘)，则进行跳转；若console.log(location.href)，则打印当前url
location.reload                // 重新加载网页，可以和定时器结合使用
location.replace               // location.replace(‘www.baidu.com‘)，跳转网页，不会产生历史记录，点击网页前进后退不会返回这个页面
location.pathname
location.port
location.protocol
location.search

function getQueryString(){
    var qs = location.search.length>0 ? location.search.substring[1]:‘‘;
    var items=qs.length ? qs.split(‘&‘):[];
    var item=null,name=null,value=null,args={};
    for (var i=0; i<items.length;i++){
        item=items[i].split(‘=‘);
        name=decodeURIComponent(item[0]);
        value=decodeURIComponent(item[1]);
        if(name.length){
              args[name]=values;
          }
   }
    return args;
}
var args = getQueryString();
console.log(args.name);
console.log(args.pwd)     ;

navigator

用于检测浏览器上的插件

function hasPlugin(name){
    name=name.toLowerCase();
    for(var i=0;i<navigator.plugins.length;I++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1)
         {
             return true;
         }else{
             return false;
         }
    }
    alert(hasPlugin(‘flash‘))

}

history

网页的历史记录

var count=0;
setTimeout(function(){
    count++;
    histroy.go(0)  // 0表示刷新，1表示网页前进按钮，-1表示网页后退按钮
}, 2000)

前端DOM

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

查找元素

　　直接查找

  document.getElementById           // 根据ID获取一个标签
  document.getElementsByName        // 根据name属性获取标签集合
  document.getElementsByClassName   // 根据class属性获取标签集合
  document.getElementsByTagName     // 根据标签名获取标签集合

　　间接查找

parentNode               // 父节点
 childNodes               // 所有子节点
firstChild               // 第一个子节点
lastChild                // 最后一个子节点
nextSibling              // 下一个兄弟节点
previousSibling          // 上一个兄弟节点
parentElement            // 父节点标签元素
children                 // 所有子标签
 firstElementChild        // 第一个子标签元素
 lastElementChild         // 最后一个子标签元素
 nextElementtSibling      // 下一个兄弟标签元素
 previousElementSibling   // 上一个兄弟标签元素

操作

内容：

1 innerText   文本
2 outerText
3 innerHTML   HTML内容
4 innerHTML
5 value       值

属性：

1 attributes                // 获取所有标签属性
2 setAttribute(key,value)   // 设置标签属性
3 getAttribute(key)         // 获取指定标签属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="全选"  onclick="CheckAll();"/>
 9     <input type="button" value="取消" onclick="CancelAll();"/>
10     <input type="button" value="反选" onclick="ReverseCheck();"/>
11
12     <table border="1" >
13         <thead>
14
15         </thead>
16         <tbody id="tb">
17             <tr>
18                 <td><input type="checkbox" /></td>
19                 <td>111</td>
20                 <td>222</td>
21             </tr>
22             <tr>
23                 <td><input type="checkbox" /></td>
24                 <td>111</td>
25                 <td>222</td>
26             </tr>
27             <tr>
28                 <td><input type="checkbox" /></td>
29                 <td>111</td>
30                 <td>222</td>
31             </tr><tr>
32                 <td><input type="checkbox" /></td>
33                 <td>111</td>
34                 <td>222</td></tr>
35         </tbody>
36     </table>
37     <script>
38         function CheckAll(ths){
39             var tb = document.getElementById(‘tb‘);
40             var trs = tb.childNodes;
41             for(var i =0; i<trs.length; i++){
42
43                 var current_tr = trs[i];
44                 console.log(current_tr.nodeType)
45                 if(current_tr.nodeType==1){
46                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
47                     inp.checked = true;
48                 }
49             }
50         }
51
52         function CancelAll(ths){
53             var tb = document.getElementById(‘tb‘);
54             var trs = tb.childNodes;
55             for(var i =0; i<trs.length; i++){
56
57                 var current_tr = trs[i];
58                 if(current_tr.nodeType==1){
59                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
60                     inp.checked = false;
61                 }
62             }
63         }
64
65         function ReverseCheck(ths){
66             var tb = document.getElementById(‘tb‘);
67             var trs = tb.childNodes;
68             for(var i =0; i<trs.length; i++){
69                 var current_tr = trs[i];
70                 if(current_tr.nodeType==1){
71                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
72                     if(inp.checked){
73                         inp.checked = false;
74                     }else{
75                         inp.checked = true;
76                     }
77                 }
78             }
79         }
80
81     </script>
82 </body>
83 </html>
84
85 Demo

反选1

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <input type="button" value="全选"  onclick="CheckAll();"/>
 9     <input type="button" value="取消" onclick="CancelAll();"/>
10     <input type="button" value="反选" onclick="ReverseCheck();"/>
11
12     <table border="1" >
13         <thead>
14
15         </thead>
16         <tbody id="tb">
17             <tr>
18                 <td><input type="checkbox" /></td>
19                 <td>111</td>
20                 <td>222</td>
21             </tr>
22             <tr>
23                 <td><input type="checkbox" /></td>
24                 <td>111</td>
25                 <td>222</td>
26             </tr>
27             <tr>
28                 <td><input type="checkbox" /></td>
29                 <td>111</td>
30                 <td>222</td>
31             </tr>
32             <tr>
33                 <td><input type="checkbox" /></td>
34                 <td>111</td>
35                 <td>222</td>
36             </tr>
37         </tbody>
38     </table>
39     <script>
40         function CheckAll(ths){
41             var tb = document.getElementById(‘tb‘);
42             var trs = tb.childNodes;
43             for(var i =0; i<trs.length; i++){
44
45                 var current_tr = trs[i];
46                 if(current_tr.nodeType==1){
47                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
48                     inp.checked = true;
49                 }
50             }
51         }
52
53         function CancelAll(ths){
54             var tb = document.getElementById(‘tb‘);
55             var trs = tb.childNodes;
56             for(var i =0; i<trs.length; i++){
57
58                 var current_tr = trs[i];
59                 if(current_tr.nodeType==1){
60                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
61                     inp.checked = false;
62                 }
63             }
64         }
65
66         function ReverseCheck(ths){
67             var tb = document.getElementById(‘tb‘);
68             var trs = tb.childNodes;
69             for(var i =0; i<trs.length; i++){
70                 var current_tr = trs[i];
71                 if(current_tr.nodeType==1){
72                     var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0];
73                     if(inp.checked){
74                         inp.checked = false;
75                     }else{
76                         inp.checked = true;
77                     }
78                 }
79             }
80         }
81
82     </script>
83 </body>
84 </html>
85
86 Demo

反选2

注：childNodes和children的区别

  • children是指DOM Object类型的子对象，不包括tag之间隐形存在的TextNode；
  • childNodes包括tag之间隐形存在的TextNode对象。
  • TextNode节点对应nodeType=3，div节点对应nodeType=1；体会反选1和反选2实例
  • 下面实例1中childNodes和children没区别
 1 //实例1
 2
 3 <div id="father">
 4     <div>01</div><div>02</div><div>03</div></div>
 5
 6 <script type="text/javascript">
 7     console.log(document.getElementById("father").childNodes);
 8 </script>
 9
10 //实例2
11
12 <div id="father">
13     <div>01</div>
14     <div>02</div>
15     <div>03</div>
16 </div>
17 <script type="text/javascript">
18     console.log(document.getElementById("father").childNodes);
19 </script>

class操作

1 className                // 获取所有类名
2 classList.remove(cls)    // 删除指定类
3 classList.add(cls)       // 添加类

标签操作

创建标签

1 // 方式一
2 var tag = document.createElement(‘a‘)
3 tag.innerText = "wupeiqi"
4 tag.className = "c1"
5 tag.href = "http://www.cnblogs.com/wupeiqi"
6
7 // 方式二
8 var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/wupeiqi‘>wupeiqi</a>"

操作标签

 1 // 方式一
 2 var obj = "<input type=‘text‘ />";
 3 xxx.insertAdjacentHTML("beforeEnd",obj);
 4 xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘))
 5
 6 //注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘
 7
 8 // 方式二
 9 var tag = document.createElement(‘a‘)
10 xxx.appendChild(tag)
11 xxx.insertBefore(tag,xxx[1])

样式操作

1 var obj = document.getElementById(‘i1‘)
2
3 obj.style.fontSize = "32px";
4 obj.style.backgroundColor = "red";

 1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
 2
 3     <script>
 4         function Focus(ths){
 5             ths.style.color = "black";
 6             if(ths.value == ‘请输入关键字‘ || ths.value.trim() == ""){
 7
 8                 ths.value = "";
 9             }
10         }
11
12         function Blur(ths){
13             if(ths.value.trim() == ""){
14                 ths.value = ‘请输入关键字‘;
15                 ths.style.color = ‘gray‘;
16             }else{
17                 ths.style.color = "black";
18             }
19         }
20     </script>

实例1

位置操作

 1 总文档高度
 2 document.documentElement.offsetHeight
 3
 4 当前文档占屏幕高度
 5 document.documentElement.clientHeight
 6
 7 自身高度
 8 tag.offsetHeight
 9
10 距离上级定位高度
11 tag.offsetTop
12
13 父定位标签
14 tag.offsetParent
15
16 滚动高度
17 tag.scrollTop
18
19 /*
20     clientHeight -> 可见区域：height + padding
21     clientTop    -> border高度
22     offsetHeight -> 可见区域：height + padding + border
23     offsetTop    -> 上级定位标签的高度
24     scrollHeight -> 全文高：height + padding
25     scrollTop    -> 滚动高度
26     特别的：
27         document.documentElement代指文档根节点
28 */

提交表单

1 document.geElementById(‘form‘).submit()

其他操作

 1 console.log                 输出框
 2 alert                       弹出框
 3 confirm                     确认框
 4
 5 // URL和刷新
 6 location.href               获取URL
 7 location.href = "url"       重定向
 8 location.reload()           重新加载
 9
10 // 定时器
11 setInterval                 多次定时器
12 clearInterval               清除多次定时器
13 setTimeout                  单次定时器
14 clearTimeout                清除单次定时器 

3、事件

绑定事件两种方式：

  • 直接标签绑定 onclick=‘xxx()‘ onfocus； this 代表当前触发事件的标签
1 <input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(this)‘>
2
3 function ClickOn(self){
4                     // self 当前点击的标签
5                 }
  • 先获取Dom对象，然后进行绑定
1 <input id=‘i1‘ type=‘button‘ >
2 document.getElementById(‘i1‘).onclick = function(){
3
4                     // this 代指当前点击的标签
5   }
  • 第三种绑定方式:对于一个标签，同时绑定多个方法
1  var myTrs = document.getElementsByTagName("tr");
2 myTrs.addEventListener(‘click‘,function(){},false)

注：谁调用function,this 就代表谁

多行表格绑定事件

1 var myTrs = document.getElementsByTagName("tr");
2 var len = myTrs.length;
3  for(var i=0;i<len;i++){
4   myTrs[i].onmouseover = function(){
5    this.style.backgroundColor = "red";
6      };
7   }

参考：https://www.cnblogs.com/wupeiqi/articles/5643298.html

原文地址：https://www.cnblogs.com/gareth-yu/p/9588808.html

时间： 2024-10-11 06:49:23

前端_DOM&BOM的相关文章

前端之BOM

目录 前端之BOM BOM window对象 window的子对象 实例:弹出框 前端之BOM BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". BOM window对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 一些常用的Window方法: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open()

Web前端之 BOM 和 DOM

前端之BOM和DOM BOM (Browser Object Model)是指浏览器对象模型,它使JavaScript有能力与浏览器进行"对话" DOM(Document Object Model))是指文档对象模型,通过它,可以访问HTML文档的所有元素 Window 对象是客户端 JavaScript 最高层对象之一,由于Windon对象是其它大部分对象的共同祖先,在调用 Window 对象的方法和属性时,可以省略 Window 对象的引用.例如:window.documenet.

前端 --- 45 BOM 和 DOM

一.BOM BOM(Browser Object Model)是指浏览器对象模型, 它使 JavaScript 有能力与浏览器进行"对话". 1. window 对象 一些常用的Window方法: (在浏览器调试器的console里面输入下面这些属性或者方法,就能看到对应的效果) window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭

前端基础BOM和DOM

BOM window对象 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 window.open() - 打开新窗口 window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面,了解一下就行了) navigator对象(window子对象) navigator.appName // Web浏览器全称 navigator.appVersion // Web浏览器厂商和版本的详细

前端 JavaScript BOM &amp; DOM

内容目录: 1. BOM 2. DOM BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行"对话". DOM (Document Object Model)是指文档对象模型,通过它,可以访问HTML文档的所有元素. 一.BOM 1.1 windows对象 所有浏览器都支持 window 对象.它表示浏览器窗口. 所有 JavaScript 全局对象.函数以及变量均自动成为 window 对象的成员. 全局变量是 wind

前端之BOM和DOM

一.前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识. JavaScript分为 ECMAScript,DOM,BOM. BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”. DOM (Document Object Model)是指文档对象模型,通过它,可以访问

前端之BOM、DOM

前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何的交互.也就是说我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续写学习BOM和DOM的相关知识. JavaScript分为 ECMAScript ,DOM , BOM. BOM(Browser Object Mdel)是指浏览器对象模型,它使JavaScript 有能力与浏览器进行对话. DOM (Document Object Model)是指文档对象模型,通过她,可以访问

前端 之 JavaScript : JS的面向对象; 定时器; BOM

JS的面向对象 定时器 BOM JS的面向对象 创建对象的几种常用方式 1.使用Object或对象字面量创建对象 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对象 1.使用Object或对象字面量创建对象 JS中最基本创建对象的方式: var student = new Object(); student.name = "easy"; student.age = "20"; 这样,一个student对象就创建完毕,拥有2个属性name以及age,

前端基础之BOM和DOM：

目录 前端基础之BOM和DOM 前言 window对象 BOM与DOM操作 DOM学习流程 一些常用的Window方法: window的子对象 navigator对象(了解即可) screen对象(了解即可) history对象(了解即可) location对象 弹出框 计时相关 DOM HTML DOM 树 查找标签 直接查找 间接查找 节点操作 创建节点 添加节点 删除节点: 替换节点: 获取值操作 对类属性操作 class的操作 指定CSS操作 事件 常用事件 绑定方式: window.o