BOM和DOM操作

BOM

　　BOM介绍

　　　　BOM：Browser Object Model，即浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

　　Windows对象

　　　　所有浏览器都支持 window 对象。它表示浏览器窗口。

　　　　如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

　　　　没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

　　　　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

　　　　全局变量是 window 对象的属性。全局函数是 window 对象的方法。

　　　　接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

 

 

 　　常用操作

　　　　window.open() 

　　　　　　Window.opend的作用是打开一个新的窗口。

window.open("https://www.baidu.com")
//在一个新的窗口打开百度

　　　　window.close()

　　　　　　Window.close的作用是关闭当前窗口。

window.close()
//关闭当前窗口

 

　　　　history.forward()

　　　　　　history.forward的作用是加载历史列表中的下一个 URL（如果存在）。

window.history.forward()
//前进一个页面

 

　　　　history.back()

　　　　　　history.back的作用是加载历史列表中的前一个 URL（如果存在）。

window.history.back()
//返回上一页

 

　　　　location.href

　　　　　　location.href的作用是获取当前页面的URL。

console.log(location.href)
//结果 https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6

 

　　　　location.href="URL"

　　　　　　location.href="URL"的作用是跳转到指定的页面

location.href="https://www.baidu.com"
//跳转到百度

 

　　　　location.reload()

　　　　　　location.reload()的作用是重新加载当前页面

location.reload()
//重新加载当前页面

 

　　　　setTimeout()

　　　　　　setTimeout()的作用是设置一个定时任务。

　　　　　　setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

　　　　　　第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

var myVar;
 
function myFunction() {
    myVar = setTimeout(alertFunc, 3000);
}
 
function alertFunc() {
    alert("Hello!");
}

//三秒后弹出"Hello!"

 

　　　　clearTimeout()

　　　　　　clearTimeout()的作用是清除定时任务。

　　　　　　clearInterval() 方法的参数必须是由 setTimeout()返回的 ID 值。

var myVar;
 
function myFunction() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
 
function myStopFunction() {
    clearTimeout(myVar);
}

//组织定时任务生效

 

　　　　setInterval()

　　　　　　setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

　　　　　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)

 

　　　　clearInterval()

　　　　　　clearInterval() 方法可取消由 setInterval() 设置的 timeout。

　　　　　　clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

 

DOM

　　DOM介绍

　　　　DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 

　　　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

　　HTML DOM 树

 

 

 

　　　　

　　　　DOM标准规定HTML文档中的每个成分都是一个节点(node)：

• • • 文档节点(document对象)：代表整个文档
    • 元素节点(element 对象)：代表一个元素（标签）
    • 文本节点(text对象)：代表元素（标签）中的文本
    • 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
    • 注释是注释节点(comment对象)　

　　　　JavaScript 可以通过DOM创建动态的 HTML：

• • • JavaScript 能够改变页面中的所有 HTML 元素
    • JavaScript 能够改变页面中的所有 HTML 属性
    • JavaScript 能够改变页面中的所有 CSS 样式
    • JavaScript 能够对页面中的所有事件做出反应

　　查找标签

　　　　直接查找

　　　　　　

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

　　　　　　注：如果我们的js代码需要页面上某个标签加载完毕，那么该js代码应该写在body内部最下方或者引入外部js文件。

 

　　　　间接查找

//全部以document为前缀关键字


parentElement            //父节点标签元素
children                 //所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild         //最后一个子标签元素
nextElementSibling       //下一个兄弟标签元素
previousElementSibling   //上一个兄弟标签元素

 

　　节点操作

　　　　创造节点

　　　　　　语法：

　　　　　　　　createElement(标签名)

var dEle = document.createElement("div")
//添加一个新的元素

 

　　　　添加节点

　　　　　　语法：

　　　　　　　　追加一个子节点（作为最后的子节点）

　　　　　　　　somenode.appendChild(newnode)；

var dEle = document.getElementById("d1")
var imgEle = document.createElement("img")
immgEle.setAttribute("src","图片地址")
dEle.appendChild(imgEle)

　　　　删除节点

　　　　　　语法：

　　　　　　　　获得要删除的元素，通过父元素调用该方法删除。

　　　　　　　　somenode.removeChild(要删除的节点)

　　　　修改节点属性

　　　　　　修改节点文本内容

　　　　　　　　获取节点文本内容的方式有两种：

　　　　　　　　　　1.innerText

　　　　　　　　　　　　不加赋值符号是获取内部文本
　　　　　　　　　　　　加了赋值符号是设置内置文本
　　　　　　　　　　　　 不可以识别HTML标签

var pEle = document.getElementById("p1")
pEle.innerText
//不加赋值符，结果为'123'
pEle.innerText="<h1>123</h1>"
//加了赋值符，不识别HTML标签，结果为'<h1>123</h1>'

 

　　　　　　　　　　2.innerHTML

　　　　　　　　　　　　不加赋值符号是获取内部文本
　　　　　　　　　　　　加了赋值符号是设置内置文本
　　　　　　　　　　　　 可以识别HTML标签

var pEle = document.getElementById("p1")
pEle.innerHTML
//不加赋值符，结果为123
pEle.innerHTML="<h1>123</h1>"
//加了赋值符，可识别HTML标签，结果为h1级别的'123'

 

　　　　　　修改节点属性

var sEle  = document.getElementById('s1')
sEle.setAttribute("style","color:blue")

// 标签的自带属性可以通过.的方式直接获取和修改
sEle.style.color    //获取
sEle.style.color='red'    //修改

 

　　获取值操作

　　　　普通的文本数据如input、select、textarea标签获取

　　　　　　使用标签对象.value的方式获取

var input_username = document.getElementById("username");
console.log(input_username.value);

 

　　　　特殊的文本数据如type = file的input标签

　　　　　　标签对象.value '''仅仅获取一个文件地址而已'''
　　　　　　标签对象.files[0] '''获取单个文件数据'''
　　　　　　标签对象.files '''获取所有文件数据'

var input_upload = document.getElementById("upload");
console.log(input_upload.file, input_upload.value

 

　　class操作

elementNode.classList.remove(cls)    // 删除指定类
elementNode.classList.add(cls)       // 添加类
elementNode.classList.contains(cls)  // 存在返回true，否则返回false
elementNode.classList.toggle(cls)    // 存在就删除，否则添加

 

　　指定CSS操作

　　　　　　修改方式：

　　　　　　　　标签对象.style.属性名 = 属性值

　　　　　　对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

elementNode.style.margin;
elementNode.style.width = '100px';

　　　　　　对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

elementNode.style.marginTop;
elementNode.style.backgroundColor = 'red';

 

　　事件

　　　　在 Web 中, 事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口。举几个可能发生的不同事件：

• • • 用户在某个元素上点击鼠标或悬停光标。
    • 用户在键盘中按下某个按键。
    • 用户调整浏览器的大小或者关闭浏览器窗口。
    • 一个网页停止加载。
    • 提交表单。
    • 播放、暂停、关闭视频。
    • 发生错误。

　　　　每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

　　　　常用事件：

onclick        // 当用户点击某个对象时调用的事件句柄。
ondblclick     // 当用户双击某个对象时调用的事件句柄。

onfocus        // 元素获得焦点。
onblur         // 元素失去焦点。 一般用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       // 域的内容被改变。 通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown      // 某个键盘按键被按下。 当用户在最后一个输入框按下回车按键时,表单提交。
onkeypress     // 某个键盘按键被按下并松开。
onkeyup        // 某个键盘按键被松开。
onload         // 一张页面或一幅图像完成加载。
onmousedown    // 鼠标按钮被按下。
onmousemove    // 鼠标被移动。
onmouseout     // 鼠标从某元素移开。
onmouseover    // 鼠标移到某元素之上。

onselect       // 在文本框中的文本被选中时发生。
onsubmit       // 确认按钮被点击，使用的对象是form。

　　　　绑定方式

　　　　　　方式1：

    <button onclick="func()">点我</button>
    <script>
        function func() {
            alert(123)
        }
    </script>

 

　　　　　　方式2：

    <button id="d1">选我</button>
    <script>
        // 1.先查找标签
        var btnEle = document.getElementById('d1')
        // 2.绑定事件
        btnEle.onclick = function () {
            alert(456)
        }
    </script>

 

　　内置参数this

　　　　this指代的就是当前被操作对象本身

// 在事件的函数体代码内部使用
    btnEle.onclick = function () {
            alert(456)
            console.log(this)
        }