BOM和DOM元素

171 阅读2分钟

BOM : Brower Object Model

浏览器对象模型 就是和浏览器相关js操作

一、.获取浏览器宽度 、获取浏览器高度

 // 一、.获取浏览器宽度 、获取浏览器高度  
        // 1.无论宽度还是高度 都包含滚动条的宽度
        // 2.这个是浏览器的宽高 ,不是页面
        console.log(  window.innerWidth) // 浏览器宽度 
        console.log( window.innerHeight )// 浏览器高度(窗口的可视区高度,不包括滚动条),所以不是页面的高度 。
 

二、获取浏览器相关的一些信息:navigator

 // 二、获取浏览器相关的一些信息:navigator 
        console.log( window.navigator);//获取浏览器的相关信息
        // appName:Netscape : 网景公司 
        // appVersion: 版本号
        // platform: "Win32" 系统版本
// 浏览器操作地址有关系的内容

三、浏览器操作地址有关系的内容

1.window.open("地址") 打开一个页面

 document.getElementById("btn").onclick = function () {
            // window.open("./a.html");//点击跳转到a.html页面
            window.open("http://www.baidu.com");//点击跳转到百度页面
        }

2.window.close() 关闭当前页面;

// 注意 关闭页面必须是通过代码打开的页面才能关闭 直接打开的不能关闭
document.getElementById("btn2").onclick = function () {
            window.close();
        }

四、所有操作地址栏相关的信息 都是在 bom的 location里

1.href:获取或者设置地址栏里的信息

console.log( window.location.href);  // 会把中文转成其他编码格式

document.getElementById("btn").onclick = function () {
            // 编程式跳转
            window.location.href = "./a.html";    //也可以达到一个跳转的目的
        }

2.reload: 重载页面(刷新页面)

 // 注意:1.reload是函数 需要执行 2.reload一定要通过事件来触发
document.getElementById("reloadPage").onclick = function () {
            window.location.reload();//这里不能写到函数外边,就是一进去浏览器就刷新,类似死循环。
        }

3.hash:获取设置地址栏的哈希值( 哈希值是地址栏 # 号后面的内容)用于区别路由

document.getElementById("hashBtn").onclick = function () {
                console.log( window.location.hash);
            }

4.search 获取或者设置 查询参(querystring)(就是地址栏?后面的内容); 使用频率极高

// 查询参格式  : ?键名1=键值1&键名2=键值2&键名3=键值3
            document.getElementById("searchBtn").onclick = function () {
                console.log(window.location.search);
            }

获取dom元素

  // 1.通过id名来获取 :获取的是一个
document.getElementById("myid");  // id是唯一的 
// 2.通过类名来获取元素(获取到的是多个元素,会放在一个伪数组里)
var eles =  document.getElementsByClassName("box")[0];  // 类名可以有多个
console.log(eles);
eles.style.backgroundColor = "red";
// 注意 通过类名获取到的是多个元素 即使是一个元素也会被放在伪数组里
 // 3.通过标签来获取 getElementsByTagName
var eles = document.getElementsByTagName("div"); //通过标签名获取多个标签
console.log(eles);
 // 4.替换id为myid的div的内容 innerHTML :会解析html 
 //    1. 是覆盖替换  2.如果不替换 可以获取 innerHTML的值
var ele =   document.getElementById("myid")
ele.innerHTML = "<h1>我是替换的内容</h1>";
console.log(ele.innerHTML);
// 5.替换标签里的文本内容 innerText :不会解析html
// 1. 是覆盖替换  2.如果不替换 可以获取 innerText的值
var ele =   document.getElementById("myid");
ele.innerText = "<h1>我是替换的内容</h1>";
console.log(ele.innerText);