JavaScript——BOM、DOM、事件

JavaScript高级目录

BOM
- Navigator
- Screen
- Location
- History
- Window
DOM
- Document
- Element
- Node
- CRUD_DOM树
- 控制样式
事件
- 概念
- 常见事件

BOM

跳转到目录

BOM: broswer object model 浏览器对象模型

Navigator 浏览器对象

Navigator 对象获取一些浏览器的信息.

属性 appName 返回浏览器的名称。
相关文档 https://www.w3school.com.cn/jsref/dom_obj_navigator.asp

Screen 屏幕对象

Screen 对象包含有关客户端显示屏幕的信息。

属性 width: 返回屏幕的宽度 height: 返回屏幕的高度
相关文档 https://www.w3school.com.cn/jsref/dom_obj_screen.asp

Location 地址栏对象

Location 对象包含有关当前 URL 的信息。

创建(获取)

window.location
location

方法 reload(): 重新加载当前文档,刷新操作.
属性 href: 设置或返回完整的url.

Demo






	// 获取input标签
	var btn = document.getElementById("btn");
	// 设置事件
	btn.onclick = function (){
		location.href = "https://www.baidu.com";
	}

相关文档 https://www.w3school.com.cn/jsref/dom_obj_location.asp

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

创建(获取)

window.history
history

方法 back() 加载 history 列表中的前一个 URL。 forward() 加载 history 列表中的下一个 URL。 go(参数) 加载 history 列表中的某个具体页面。
参数：正数：前进几个历史记录负数：后退几个历史记录
属性 length: 返回当前窗口历史列表中的url数量.

Window 窗口对象

跳转到目录 Window 对象表示浏览器中打开的窗口。

方法

与弹出框有关的方法 alert(): 显示带有一段消息和一个确认按钮的警告框. confirm(): 显示带有一段消息,以及确认和取消两个按钮的对话框. 若点击确定,该方法返回true, 点击取消,返回false. prompt(): 显示可提示用户输入的对话框. 返回值为用户输入的内容.
与打开关闭有关的方法 close():关闭浏览器窗口. 谁调用的,就关闭哪个窗口 open(arg1, arg2, arg3, arg4): 打开一个新的浏览器窗口. 注意: 这4个参数都是可选的, arg1 传入url, arg3传入窗口的特征(设置宽高等)
```
window.open("https://www.baidu.com","","width=100,height=100");
```
与定时器有关的方法 setTimeout(code,millisec): 在指定的毫秒数后调用函数或计算表达式。 clearTimeout(id_of_settimeout): 取消由 setTimeout() 方法设置的 timeout。传入某个定时器的id用来取消指定的定时器. setInterval(code,millisec): 按照指定的周期（以毫秒计）来调用函数或计算表达式。 clearInterval(id_of_settimeout): 取消由 setInterval() 设置的 timeout。

属性

获取其他BOM对象 History location Navigator Screen
获取DOM对象 document

特点
Window对象不需要创建可以直接使用, window.方法名() window引用可以省略. 方法名();

DOM

跳转到目录

DOM: Document Object Model 文档对象模型
- 文档: 超文本文档(超文本标记文档) html, xml
- 对象: 提供了属性和方法.
- 模型: 使用属性和方法操作超文本标记文档
- 可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作.
- dom里面已经将html里面的标签,属性,文本内容都封装成了对象.
dom解析html文档的过程根据html的层级结构,在内存中分配一个树形结构, 需要把html中的每部分封装为对象.
- Document对象: 整个文档
- Element对象: 标签对象
- Attribute对象: 首先要获取标签对象
- Text对象: 首先要获取标签对象
- Comment对象: 注释对象
- Node节点对象: 这个对象是上面这些对象的父对象, 如果在对象内找不到想要的方法, 此时可以在Node节点对象中去查找想要的方法.

Document 文档对象

跳转到目录

创建(获取): 在html dom模型中可以使用window对象来获取
- window.document
- document
方法 write() 向页面输出变量/html代码
```
document.write("abc");
document.write("");
```
- 获取Element对象 getElementById() ：根据id属性值获取元素对象,id属性值一般唯一 getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组 getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组 getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
- 创建其他的DOM对象 createAttribute(name) createComment() createElement() createTextNode()

Element 元素对象(标签对象)

跳转到目录

创建(获取): 通过document来获取和创建
方法(首先通过document来获取元素,然后通过元素进行操作) getAttribute(attributename): 获取指定的属性 setAttribute(attributename,attributevalue): 给元素添加属性 removeAttribute(attributename): 移除指定名称的属性 注意: 不能删除value
获取标签下面的子标签 childNodes: 这个属性兼容性很差 getElementsByTagName(标签名): 兼容性好,获取标签下面子标签的唯一有效方法.

Node 节点对象

特点所有dom对象都可以被认为是一个节点.
属性 nodeName:获取节点的名称 nodeType: 获取节点的类型 nodeValue: 获取节点的value值因为dom在解析html的时候, html里面的标签,属性,文本都是一个节点,所以上面的三个属性对其都是不同的值.
- 标签节点对应的nodeType为1
- 属性节点对应的nodeType为2
- 文本节点对应的nodeType为3
parentNode: 获取父节点的属性 childNodes: 得到所有子节点,兼容性差 firstChild: 获取第一个子节点 lastChild: 获取最后一个子节点 nextSibling: 返回一个给定节点的下一个兄弟节点 previousSibling: 返回一个给定节点的上一个兄弟节点
```
	aaaaaa
	bbbbbb
	cccccc
	dddddd


	// 获取li的父节点
	var li1 = document.getElementById("li1");
	var ul1 = li1.nextSibling;
	alert(ul1.id);
	// 获取ul的第一个子节点
	var ul1 = document.getElementById("ulid");
	var li1 = ul1.lastChild;
	alert(li1.id);
	// 获取li2的上一个节点和下一个节点
	var li2 = document.getElementById("li2");
	var li1 = li2.previousSibling;
	var li3 = li2.nextSibling;
	alert(li1.id);
	alert(li3.id);
```

CRUD_DOM树

跳转到目录

查找节点 getElementById():通过节点的id属性,查找指定节点.
添加节点 appendChild()：向节点的子节点列表的结尾添加新的子节点。
插入节点 insertBefore(newNode, oldNode): 向oldNode节点前插入一个新节点.通过父节点添加
删除节点 removeChild()：删除（并返回）当前节点的指定子节点。
替换节点 replaceChild()：用新节点替换一个子节点。通过父节点替换
复制节点 cloneNode(true): 复制节点
innerHTML属性作用:
1. 获取文本内容
2. 向标签里面设置内容(可以是html代码)
Demo




    
    Title
    
        div#div1 {
            width: 360px;
            height: 150px;
            border: 2px solid red;
        }

        div#div2 {
            width: 360px;
            height: 150px;
            border: 2px solid black;
        }
    




    
        one
        two
        three
        four
    











    // 添加节点
    /*
    1.获取到ul
    2.获取到div2
    3.把ul添加到div2
    */
    var input1 = document.getElementById("input1");
    input1.onclick = function () {
        var ul = document.getElementById("ul1");
        var div = document.getElementById("div2");
        div.appendChild(ul);
    }

    // 插入节点
    /*
    1.获取到li3标签
    2.创建li
    3.创建文本
    4.把文本添加到li下面
    5.获取到ul
    6.把li添加到ul下面
    */
    var input2 = document.getElementById("input2");
    input2.onclick = function () {
        var li3 = document.getElementById("li3");
        var li = document.createElement("li");
        var text = document.createTextNode("朝阳红");
        li.appendChild(text);
        var ul = document.getElementById("ul1");
        ul.insertBefore(li, li3);
    }

    // 删除节点
    /*
    1.获取到li标签
    2.执行父节点ul标签
    3.执行删除
    */
    var input3 = document.getElementById("input3");
    input3.onclick = function () {
        var li3 = document.getElementById("li3");
        var ul = document.getElementById("ul1");
        ul.removeChild(li3);
    }
    
    // 替换节点
    /*
    1.获取到li标签
    2.创建标签li
    3.创建文本
    4.把文本添加到li下面
    5.获取父节点Ul标签
    6.执行替换
    */
    var input4 = document.getElementById("input4");
    input4.onclick = function () {
        var li3 = document.getElementById("li3");
        var li = document.createElement("li");
        var text = document.createTextNode("HelloWorld");
        li.appendChild(text);
        var ul = document.getElementById("ul1");
        ul.replaceChild(li, li3);
    }

    // 复制节点(把ul列表复制到另一个div中)
    /*
    1.获取到ul
    2.执行复制方法：cloneNode(true)
    3.把复制后的内容放到div2中
        获取div2
        appendChild方法
    */
    var input5 = document.getElementById("input5");
    input5.onclick = function () {
        var ul = document.getElementById("ul1");
        var ulClone = ul.cloneNode(true);
        var div = document.getElementById("div2");
        div.appendChild(ulClone);
    }

控制样式

通过DOM来控制标签的样式
使用style属性来设置
提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。




    
    Title
    
        .sun {
            font-weight: bold;
            font-size: 30px;
            color: skyblue;
            border: 2px dashed #000;
        }
    




桂朝阳
大太阳




    // 获取类名为zy的标签
    var zy = window.document.getElementsByClassName("zy")[0];
    // alert(zy.className);

    // 方式一(自己添加)给类名为zy的div添加样式
    // zy.style.border = "1px solid #ccc";
    // zy.style.fontSize = "20px";

    // 方式二(调用已经写好的)
    zy.className = "sun";

事件

跳转到目录

事件监听机制

概念: 某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如：按钮文本输入框…
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见的事件

点击事件： onclick：单击事件 ondblclick：双击事件
焦点事件 onblur：失去焦点 * 一般用于表单验证 onfocus:元素获得焦点。
加载事件： onload：一张页面或一幅图像完成加载。
鼠标事件： onmousedown 鼠标按钮被按下。 * 定义方法时，定义一个形参，接受event对象。 * event对象的button属性可以获取鼠标按钮键被点击了。 onmouseup 鼠标按键被松开。 onmousemove 鼠标被移动。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。
键盘事件： onkeydown 某个键盘按键被按下。 onkeyup 某个键盘按键被松开。 onkeypress 某个键盘按键被按下并松开。
选择和改变 onchange 域的内容被改变。 onselect 文本被选中。
表单事件： onsubmit 确认按钮被点击。 * 可以阻止表单的提交 * 方法返回false则表单被阻止提交。 onreset 重置按钮被点击。

JavaScript——BOM、DOM、事件

最近更新

热门博客

[ 申请 ]友情链接：