js之BOM和DOM的介绍

Bom浏览器对象模型

BOM是Borwser Object Model的简写模式，它提供了一整套对浏览器操作的方法，可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

1、获取可是窗口的宽和高

        //获取可是窗口的宽高
        var width = window.innerWidth;
        var height = window.innerHeight;
        console.log(width);
        console.log(height);

2、浏览器的弹出层

        window.alert(123);//提示框
        var a=window.prompt("请输入内容");//输入框
        window.confirm("确定吗");//询问框

3、开启以及关闭标签页

        window.open('url');//开启
        window.close('url');//关闭
        //打开新页面  关闭新页面 window.close()关闭当前页面
        var win = undefined;
        function openpage() {
            win = window.open("./diyige.html");
        }
        function closepage() {
            win.close();
        };

4、浏览器的常见事件

       window.onload=function(){};//资源加载
        window,onresize=function(){};//可是尺寸的改变
        window.onscroll=function(){};滚动条位置的位置
                //浏览器资源加载
        window.onload = function () {
            console.log("加载")
        }
        //可视窗口改变
        window.onresize = function () {
            console.log("窗口大小改变")
        };
        //滚动条位置改变
        window.onscroll = function () {
            console.log("滚动条位置改变");
            //卷曲宽高
            var top = document.documentElement.scrollTop;
            var left =  document.documentElement.scrollLeft;
            console.log(top, left);
        }

5、浏览器的历史事件

window.history.back();//回退
window.history.forword();//前进
window,history.go();//当参数为1表示前进 -1为后退  0表示当前页面

6、卷曲的尺寸

        window.onscroll = function () {
            console.log("滚动条位置改变");
            //卷曲宽高
            var top = document.documentElement.scrollTop||document.body.scrollTop;
            var left = document.documentElement.scrollLeft||document.body.scrollLeft;
            console.log(top, left);
        }

7、设置滚动条的位置

window.scrollTo(left,Top);//滚动到
wondow.scrollTo({
    Left:10px,
    Top:10px,
    behavior:'smooth'
})
​

8、定时器

setInterval(function(){},ms);//固定时间  可以反复调用
setTinmeout(function(){},ms);//延时定时器  只可以调用一次
clearTimeout();//清除定时器
clearInterval();//清除定时器

Dom文档对象模型

Dom是Document Object Model的简写 文档对象模型 是一整套操作文档流相关内容的属性和方法，通过它，可以访问HTML文档的所有元素。

1、获取元素

• 通过标签名获取

   document.getElementsByTagName('标签名')//返货的是一个数组 需要根据索引获取相应的
   var lis = document.getElementsByTagName("li");

• 通过ID获取

  document.getElementById("id名")
  var ele = document.getElementById("orange");

• 通过类名获取

   document.getElementsByClassName("类名")
   var eles = document.getElementsByClassName("section");

• 通过选择器

    document.querySelector(" ");
    document.querySelectorAll(" ");
    var liEle =  document.querySelector("ul li");
     var liEle =  document.querySelector("ul li")[3];//获取第四个li

• 获取body html

  document.body;//获取body
  document.documentElement;//获取html

  2、操作元素内容

• 对文本内容进行操作

  获取文本内容 ele.innerText

  设置文本内容 ele.innerText=" "

• 超文本内容

  获取内容 ele.innerHTML

  设置内容 ele,innerHTML=" "

  3、操作元素

• 原生属性

  获取属性 元素.属性名

  设置属性 元素.属性名= “ 属性值 ”

• 自定义属性

  获取属性 元素.getAttribute("属性名")

  设置属性 元素.setAttribute("属性名"，"属性值")

  移除属性 元素.removeAttribute("属性名")

      // 获取属性 .getAttribute('属性名')
      var classVal = ele.getAttribute('class');
      console.log('class:', classVal);
      // 设置属性 .setAttribute('属性名','属性值');
       ele.setAttribute('class','active'); 
      // 移除属性 removeAttribute('属性名')
      ele.removeAttribute('class');

• 表单属性

  通过value来改变内容 disabled 表示禁用

• 操作元素类名

  ele.className 修改属性

  ele.className=" " 移除

• 样式属性

  操作行内样式

  ele.style;
  var div = document.querySelector('div');
  div.style.backgroundColor="green"

  获取非行内样式

  window.getComputedStyle(lastLi).fontSize

  4、操作节点

• 创建节点

  document.createElement("节点名称")

• 添加节点

  追加子节点 父节点,appendChild("")

  在指定元素前面；添加子节点 父节点.insertBefore("")

• 移除节点

  父节点.removeChild(); 移除子节点

  ele.remove(); 移除本身

• 克隆节点 clonNode()

  clonNode(true);表示克隆节点中的所有，包括字节的

  clonNode(false);clonNode();只复制标签 不复制内容