js基础扫盲 - BOM和DOM

js 的组成

js 由三部分组成:ECMAScript,BOM和DOM 。根据浏览器的不同,表现也会略有区别

  • DOM:即文档对象模型(document object model),用来获取或设置文档中标签的属性,例如获取或者设置input表单的value值
  • BOM:即浏览器对象模型(brower object model),用来获取或设置浏览器的属性、行为,例如:新建窗口、获取屏幕分辨率、浏览器版本号等。

由于DOM的操作对象是文档(Document),所以dom和浏览器没有直接关系。

window对象是客户端JavaScript最高层对象之一,由于window对象是其它大部分对象的共同祖先。

BOM

BOM包括

  • window对象:window 对象表示浏览器中打开的窗口

        window对象属性:
            Document对象,
            history对象,
            Location对象,
            Screen对象,
            name 浏览器窗口的名字,
            defaultStatus 设置或返回窗口状态栏中的默认文本,
            status 设置窗口状态栏的文本
    
        window对象方法:
            alert(“”) 显示带有一段消息和一个确认按钮的警告框。
            confirm(“”) 显示带有一段消息以及确认按钮和取消按钮的对话框。
            prompt(“”) 显示可提示用户输入的对话框。
            open(“url”,”name”) 打开一个新的浏览器窗口或查找一个已命名的窗口。
            showModalDialog (“打开窗口的url”,”窗口名”,”窗口特征”)(chrome不支持)
            close() 关闭浏览器窗口。 ( FF不支持)
            focus () 窗口失去焦点
            setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
            clearInterval() 取消由 setInterval() 设置的 timeout。
            setTimeout() 在指定的毫秒数后调用函数或计算表达式。
            clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
            moveBy() 可相对窗口的当前坐标把它移动指定的像素。
            moveTo() 把窗口的左上角移动到一个指定的坐标。
            resizeBy() 按照指定的像素调整窗口的大小。
            resizeTo() 把窗口的大小调整到指定的宽度和高度。
            scrollBy() 按照指定的像素值来滚动内容。
            scrollTo() 把内容滚动到指定的坐标。
            onload() 事件会在页面或图像加载完成后立即发生
    
  • Location对象:Location 对象包含有关当前 URL 的信息。

                属性:href(控制浏览器地址栏的内容),hostname(设置或返回当前 URL 的主机名) 等
                方法:reload() (刷新页面),reload(true) (刷新页面,不使用缓存)
            
  • history对象:history对象包含用户(在浏览器窗口中)访问过的 URL

                属性:length,历史列表中url数量
                方法:back(),返回上一级。forward() 跳转到下一个url。go(),加载history中某一个urk
            
  • navigator对象:navigator对象包含有关浏览器的信息

                属性:appName 浏览器名称,appVersion 浏览器版本,platform操作系统
            

总结:BOM的核心是window,在window下添加着 Location,history,navigator等对象,主要是用来和浏览器交互。 类比于 app混合开发时app端提供一些api接口,用来和app交互。

DOM

HTML 和 XML 的应用程序接口(API),DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

  • 选择器:

                直接查找:document.getElementById,document.getElementsByClassName
                间接查找:document.getElementById,document.getElementsByClassName
            
  • 节点操作:

                创建节点:document.createElement
                添加节点:dd.appendChild(a),dd.insertBefore(a,d2);
                删除节点:dd.removeChild(d2)
                替换节点:dd.replaceChild(a,d1)
            
  • 文本操作:

                d1.innerText = "< a href=''>百度< /a>";
                d1.innerHTML = "< a href=''>百度< /a>";  能够识别标签
            
  • 属性操作:

                divEle.setAttribute("age","18")
                divEle.getAttribute("age")
                divEle.removeAttribute("age")
            
  • 值操作:

                var inp = document.getElementById('city');
                inp.value;  #查看值
                inp.value = '1';  #设置值
            
  • class的操作:

                var d = document.getElementById('oo');
                d.classList;  #获得这个标签的class属性的所有的值
                d.classList.add('xx2');  #添加class值
                d.classList.remove('xx2'); #删除class值
                d.classList.contains('xx2');  #判断是否有某个class值,有返回true,没有返回false
                d.classList.toggle('xx2');  #有就删除,没有就增加
            
  • css操作:

                var d = document.getElementById('oo');
                d.style.backgroundColor = 'deeppink';  有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写
                d.style.height = '1000px'
            
  • 事件:

                onclick        当用户点击某个对象时调用的事件句柄。
                ondblclick     当用户双击某个对象时调用的事件句柄。
    
                onfocus        元素获得焦点。
                onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
                onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)
    
                onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
                onkeypress     某个键盘按键被按下并松开。
                onkeyup        某个键盘按键被松开。
                onload         一张页面或一幅图像完成加载。
                onmousedown    鼠标按钮被按下。
                onmousemove    鼠标被移动。
                onmouseout     鼠标从某元素移开。
                onmouseover    鼠标移到某元素之上。
    
                onselect      在文本框中的文本被选中时发生。
                onsubmit      确认按钮被点击,使用的对象是form。
            

参考 BOM和DOM详解

参考 BOM和DOM

参考 前端基础之BOM和DOM

随机浏览