前端之BOM和DOM

前端之BOM和DOM

一、前戏

截至目前为止 我们虽然已经学会了js语法 但是你会发现跟浏览器和html文件还是一点关系没有。

也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DOM相关知识。

JavaScript分为 ECMAScript,DOM,BOM。

BOM(Browser Object Model)是指浏览器对象模型,js代码操作浏览器。

DOM (Document Object Model)是指文档对象模型,js代码操作标签。

二、BOM操作

  • window对象
window对象指代的就是浏览器窗口

window.innerHeight  浏览器窗口的高度  
900
window.innerWidth   浏览器窗口的宽度
1680

window.open('https://www.youku.com/','','height=400px,width=400px,top=400px,left=400px')
# 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置
# 扩展父子页面通信window.opener()  了解【父页面子页面可以通过这种方式进行通信】
window.close  关闭当前窗口
  • windows子对象

    浏览器对象,通过这个对象可以判定用户所使用的浏览器,包含了浏览器相关信息。

window.navigator.appName   # Web浏览器全称
"Netscape"

window.navigator.appVersion  # Web浏览器厂商和版本的详细字符串
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

window.navigator.userAgent  # 用来表示当前是否是一个浏览器【掌握】
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

navigator.platform  # 浏览器运行所在的操作系统
"Win32"

"""
扩展:反爬措施
	1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器
		userAgent
		user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
	如何破解该措施
		在你的代码中加上上面的user-agent配置即可
"""

ps: 如果是window的子对象 那么window可以省略不写

  • history对象

    window.history 对象包含浏览器的历史。

window.history.back()  回退到上一页
window.history.forward()  前进到下一页
# 对应的就是你浏览器左上方的两个的箭头
  • location【掌握】
window.location.href	# 获取当前页面的url
window.location.href = url  # 跳转到指定的url
window.location.reload()  # 属性页面   浏览器左上方的小圆圈

弹出框

  • 警告框

    警告框经常用于确保用户可以得到某些信息。

    当警告框出现后,用户需要点击确定按钮才能继续进行操作。

  • 确认框

    确认框用于使用户可以验证或者接受某些信息。

    当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。

    如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。

  • 提示框

    提示框经常用于提示用户在进入页面前输入某个值。

    当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。

    如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。

alert('你不要过来啊!!!')

confirm('你确定真的要这么做吗?')
false
confirm('你确定真的要这么做吗?')
true

prompt('陕西省','请输入所在地址?')
"渭南市"

计时器相关

通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

  • setTimeout() 【过一段时间之后触发(一次)】
var t=setTimeout("JS语句",毫秒)  # js语句通常是一个函数【间隔一定的时间之后执行】
# setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
  • clearTimeout()
clearTimeout(setTimeout_variable)  # setTimeout_variable 是estTimeout()返回的变量【因为js是弱类型语言,所以函数名也可以进行传递】

# 如下代码所示
var timer = setTimeout(function(){alert(123);}, 3000)  # 在指定时间之后执行一次相应函数
clearTimeout(timer);  # 取消setTimeout设置
  • setInterval() 【每隔一段时间触发一次(循环)】

    setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

var timer = setInterval("JS语句",时间间隔)  # 使用方式
# 返回值 可以 传递给clearInterval(timer) 函数,来取消循环定时器

ps:综合案例

# 常用的定时器循环的使用方式【循环固定次数之后,停止执行】
<script>
    function func1() {
        alert(123)
    }
    function show(){
        let t = setInterval(func1,3000);  // 每隔3秒执行一次
        function inner(){
            clearInterval(t)  // 清除定时器
        }
        setTimeout(inner,9000)  // 9秒中之后触发
    }
    show()
</script>

"""或者这样"""
<script>
    function func1(){
        alert('123');
    }
    // 设置计时器,每隔一段时间打印func1
    let timer = setInterval(func1, 3000);
    // 过9秒之后结束循环打印
    function clear() {
        clearInterval(timer);
    }
    setTimeout(clear, 9000);
</script>

三、DOM操作

DOM树的概念:所有的标签都可以称之为是节点

img

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

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

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

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

学习方式:DOM操作操作的是标签 而一个html页面上的标签有很多

  1. 先学如何查找标签
  2. 再学DOM操作标签

查找标签

  • 直接查找【必须掌握】
"""
id查找
类查找
标签查找
"""
# 注意三个方法的返回值是不一样的【查找方式的方法名可真的是简明知意】
document.getElementById('d1')  # 得到的是一个真正的标签
<div id=​"d1">​…​</div>​

document.getElementsByClassName('c1')  # 得到的是要给节点数组,因为ciass可以表示多个标签【通过索引可得到标签】
HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
      
document.getElementsByTagName('div')  # 得到的是要给节点数组,因为tag标签可以表示多个标签【通过索引可得到标签】
HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                   
                   
let divEle = document.getElementsByTagName('div')[1]
divEle
<div>​div>div​</div>​
"""
当你用变量名指代标签对象的时候 一般情况下都推荐你书写成
xxxEle
	divEle
	aEle
	pEle
"""
  • 间接查找
let pEle = document.getElementsByClassName('c1')[0]  # 注意是否需要索引取值

# 父结点的使用方式
pEle.parentElement  # 拿父节点【是真正的标签】
<div id=​"d1">​"div
    "<div>​div>div​</div>​<p class=​"c1">​…​</p>​<p>​div>p​</p>​</div>​
    
pEle.parentElement.parentElement  # 二级父节点得到
<body>​…​</body>​

pEle.parentElement.parentElement.parentElement  # 三级父标签
<html lang=​"en">​<head>​…​</head>​<body>​…​</body>​</html>​

pEle.parentElement.parentElement.parentElement.parentElement  # 四级父标签
null

# 子结点的使用方法
let divEle = document.getElementById('d1')
divEle.children  # 获取所有的子标签【得到的是标签数组】

divEle.children[0]  # 索引取值
<div>​div>div​</div>​
  
divEle.firstElementChild  # 第一个子节点
<div>​div>div​</div>​

divEle.lastElementChild  # 最后一个子节点
<p>​div>p​</p>​

divEle.nextElementSibling  # 同级别下面第一个
<div>​div下面div​</div>​

divEle.previousElementSibling  # 同级别上面第一个
<div>​div上面的div​</div>​

节点操作

  • 方法使用汇总
  1. createElement(标签名)
  2. somenode.appendChild(newnode);
  3. somenode.insertBefore(newnode,某个节点);
  4. somenode.removeChild(要删除的节点)
  5. somenode.replaceChild(newnode, 某个节点);
var divEle = document.createElement("div");  # 创建一个 div标签

# 综合案例
"""
通过DOM操作动态的创建img标签
并且给标签加属性
"""
let imgEle = document.createElement('img')  # 创建标签

imgEle.src = '111.png'  # 给标签设置默认的属性【内置的】

imgEle.username = 'yangyi'  # 自定义的属性没办法点的方式直接设置【错误】

imgEle.setAttribute('username','yangyi')   # 既可以设置自定义的属性也可以设置默认的书写

"""
给标签中添加子标签
"""
let divEle = document.getElementById('d1')
divEle.appendChild(imgEle)  # 标签内部添加元素【尾部追加】

"""
创建a标签
设置属性
设置文本
添加到标签内部
添加到指定的标签的上面
"""
let aEle = document.createElement('a')
aEle.href = 'https://www.youku.com/'  # 添加内置的href属性
aEle.innerText = '点我!'  # 给标签设置文本内容

# 固定位置添加结点【需要两个节点值,一个父节点,一个要在其之前插入的子节点】
somenode.insertBefore(newnode,某个节点);
let divEle = document.getElementById('d1')
let pEle = document.getElementById('d2')
divEle.insertBefore(aEle,pEle)  # 添加标签内容指定位置添加


"""
额外补充
	appendChild()
		removeChild()
		replaceChild()
	
	
	setAttibute()  设置属性
		getAttribute()  获取属性
		removeAttribute()  移除属性
"""
  • innerText与innerHTML
divEle.innerText  # 获取标签内部所有的文本【仅文本】
    "div 点我有你好看!
    div>p
    div>span"

divEle.innerHTML  # 内部文本和标签都拿到【html格式】
	"div
        <a href="https://www.mzitu.com/">点我有你好看!</a><p id="d2">div&gt;p</p>
        <span>div&gt;span</span>
    "
    
divEle.innerText = 'heiheihei'  # 均可添加文本
"heiheihei"

divEle.innerHTML = 'hahahaha'  # 均可添加文本
"hahahaha"

divEle.innerText = '<h1>heiheihei</h1>'  # 不识别html标签
"<h1>heiheihei</h1>"

divEle.innerHTML = '<h1>hahahaha</h1>'  # 识别html标签
""&lt;h1&gt;hahahaha&lt;/h1&gt;""

获取值操作

​ elementNode.value

适用于以下标签:

  • input
  • select
  • textarea
var iEle = document.getElementById("i1");
console.log(iEle.value);

var sEle = document.getElementById("s1");
console.log(sEle.value);

var tEle = document.getElementById("t1");
console.log(tEle.value);

# 如何获取用户上传的文件数据
let fileEle = document.getElementById('d3')
fileEle.value  # 无法获取到文件数据【仅能拿到文件名】
"C:\fakepath\02_测试路由.png"

fileEle.files  # 得到文件数组【第一个参数为文件,第二个参数为长度】
FileList {0: File, length: 1}0: File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}length: 1__proto__: FileList
            
fileEle.files[0]  # 获取文件数据【通过索引去取值】
File {name: "02_测试路由.png", lastModified: 1557043082000, lastModifiedDate: Sun May 05 2019 15:58:02 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 29580, …}

calss操作

let divEle = document.getElementById('d1')  

divEle.classList  # 获取该标签所有的类属性
DOMTokenList(3) ["c1", "bg_red", "bg_green", value: "c1 bg_red bg_green"]

divEle.classList.remove('bg_red')  # 移除某个类属性【使用列表的方法】

divEle.classList.add('bg_red')  # 添加类属性

divEle.classList.contains('c1')  # 验证是否包含某个类属性
true

divEle.classList.toggle('bg_red')  # 有则删除无则添加【比较奇葩】
false
divEle.classList.toggle('bg_red')
true
divEle.classList.toggle('bg_red')
false

css操作

# DOM操作操作标签样式 统一先用style起手【将css中的-去掉,变成驼峰体】
let pEle = document.getElementsByTagName('p')[0]  # 获取p标签的数组

pEle.style.color = 'red'

pEle.style.fontSize = '28px'

pEle.style.backgroundColor = 'yellow'

pEle.style.border = '3px solid red'

四、事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作(action),比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

"""
达到某个事先设定的条件 自动触发的动作【原生js事件 都是以on开头】
"""

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

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

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

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。
  • 绑定事件的两种方式

    script标签既可以放在head内 也可以放在body内,但是通常情况下都是放在body内的最底部。【文件执行顺序,自上而下执行】

# 绑定事件的两种方式
<button onclick="func1()">点我</button>
<button id="d1">点我</button>

<script>
    // 第一种绑定事件的方式
    function func1() {
        alert(111)
    }
    // 第二种
    let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {   # 给 btnEle添加onclick属性【标签本就有onclick属性,所以用.即可】
        alert(222)
    }
   // 第三种
   let divEle = document.getElementById('d1');
   function func1(){
     alert('123');
   }
   divEle.onclick = func1;  // 此处不加 ()

</script>
  • 预加载方式【不推荐】
# 等待浏览器窗口加载完毕之后再执行代码
"""
# onload
	等待XXX加载/读取/渲染...完毕
  XXX.onload
  	等待XXX好了
"""
window.onload = function () {
            // 第一种绑定事件的方式【即便如此,还会报错,因为onclick="func1()" 不存在】
            function func1() {
                alert(111)
            }
            // 第二种
            let btnEle = document.getElementById('d1');
            btnEle.onclick = function () {
                alert(222)
            }
        }

原生js事件绑定

  • 开关灯案例【点击按钮变色】
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
          height: 200px;
          width: 200px;
          border: solid 5px;
          border-radius: 50%;
        }
        .bg_red {
          background-color: red;
        }
      .bg_green {
          background-color: green;
      }
    </style>
</head>
<body>
    <div id="d1" class="c1 bg_red bg_green"></div>
    <button id="d2">变色</button>
</body>
<script>
    let btnEle = document.getElementById('d2')
    let divEle = document.getElementById('d1')
    btnEle.onclick = function () {  // 绑定点击事件
        // 动态的修改div标签的类属性
        divEle.classList.toggle('bg_green')  //有则删除,无则添加
    }
</script>
</html>
  • input框获取焦点失去焦点案例
<input type="text" value="老板 去吗?" id="d1">

<script>
    let iEle = document.getElementById('d1')
    // 获取焦点事件
    iEle.onfocus = function () {
        // 将input框内部值去除
        iEle.value = ''
        //  点value就是获取   等号赋值就是设置
    }
    // 失去焦点事件 【onblur 俺不乐---失去焦点俺就不乐意了,哈哈】
    iEle.onblur = function () {
        // 给input标签重写赋值
        iEle.value = '没钱 不去!'
    }
</script>
  • 实时展示当前时间
<input type="text" id="d1" style="display: block;height: 50px;width: 200px">   <!--将行内标签input设置为块级标签,为了更好的显示,仅此而已-->
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    // 先定义一个全局存储定时器的变量【和C语言类似】,对比python,才发现python必须拥有golbal参数,因为python如果这样设置,便会直接被当作是局部变量
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')
    // 1 访问页面之后 将访问的时间展示到input框中
    // 2 动态展示当前时间
    // 3 页面上加两个按钮 一个开始 一个结束
    function showTime() {
        // 定义一个事件对象
        let currentTime = new Date();
        //将input框中的value 设置为本地时间
        inputEle.value = currentTime.toLocaleString()
    }
	
    // 给开始按钮绑定点击事件
    startBtnEle.onclick = function () {
        // 限制定时器只能开一个【因为即便clearInterval之后,t仍然不是null】
        if(!t){
            t = setInterval(showTime,1000)  // 每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空【修改全局变量null】
        t = null
    }
</script>


/* 第二遍 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="d1" style="display: block;height: 50px;width: 200px">   <!--将行内标签input设置为块级标签,为了更好的显示,仅此而已-->
    <button id="d2">开始</button>
    <button id="d3">结束</button>
</body>
<script>
  // 如何实时展示当前时间???
  // 1 给开始绑定一个点击事件,点击之后,拿到时间对象,渲染出来
  // 实时: 每一秒渲染一次即可
  // 拿到标签对象
  let inEle = document.getElementById('d1');
  let startEle = document.getElementById('d2');
  let stopEle = document.getElementById('d3');
  // 设置一个全局变量
  let timer = null;
  // 给开始按钮绑定点击事件【函数中设置间接循环】
  startEle.onclick = function () {
      // 进行一个判断,因为如果一直点击开始,可能会开个多个定时器
      if (!timer){
        // 设置每隔1s循环执行
        timer = setInterval(function () {
            // 拿到此时的日期对象[日期对象也要循环取值,因为每次取到的都是当前时刻的日期]
            let dataObj = new Date();
            // 拿到日期
            let dataCon = dataObj.toLocaleString()
            // 向input中进行渲染
            inEle.value = dataCon;
        }, 1000)
      }
  }
  // 给结束按钮绑定点击事件【取消间接循环】
  stopEle.onclick = function (){
      // 取消间接循环即可
      clearInterval(timer);
      timer = null;
  }
</script>
</html>
  • 省市联动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!--定义两个select选择框-->
<select name="" id="d1">
    <!--添加一个固定选择标题-->
    <option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>

<script>
    let proEle = document.getElementById('d1')
    let cityEle = document.getElementById('d2')
    // 先模拟省市数据
    data = {
        "河北": ["廊坊", "邯郸",'唐山'],
        "北京": ["朝阳区", "海淀区",'昌平区'],
        "山东": ["威海市", "烟台市",'临沂市'],
        '上海':['浦东新区','静安区','黄浦区'],
        '深圳':['南山区','宝安区','福田区']
    };
    // 选for循环获取省【for循环只能循环,自定义对象,也就是类似于python中的字典】
    for(let key in data){
        // 将省信息做成一个个option标签 添加到第一个select框中
        // 1 创建option标签
        let opEle = document.createElement('option')
        // 2 设置文本
        opEle.innerText = key
        // 3 设置value
        opEle.value = key  // <option value="省">省</option>
        // 4 将创建好的option标签添加到第一个select中
        proEle.appendChild(opEle)
    }
    // 文本域变化事件  change事件
    proEle.onchange = function () {
        // 先获取到用户选择的省
        let currentPro = proEle.value
        // 获取对应的市信息【data.currentPro书写也可以】
        let currentCityList = data[currentPro]
        // 清空市select中所有的option【为了防止一个小bug,因为其不会自动清除,修改以前数据】
        cityEle.innerHTML = ''
        // 自己加一个请选择【仅仅是一个标签头而已】
        let ss = "<option disabled selected>请选择</option>"
        // let oppEle = document.createElement('option')
        // oppEle.innerText = '请选择'
        // oppEle.setAttribute('selected','selected')
        cityEle.innerHTML = ss

        // for循环所有的市 渲染到第二个select中
        for (let i=0;i<currentCityList.length;i++){
            let currentCity = currentCityList[i]
            // 1 创建option标签
            let opEle = document.createElement('option')
            // 2 设置文本
            opEle.innerText = currentCity
            // 3 设置value
            opEle.value = currentCity  // <option value="省">省</option>
            // 4 将创建好的option标签添加到第一个select中
            cityEle.appendChild(opEle)
        }
    }
</script>
</body>
</html>
posted @ 2021-06-20 15:11  YangYi215  阅读(81)  评论(0编辑  收藏  举报