• 前端-BOM与DOM

    BOM（Browser Object Model） 　　

    　　浏览器对象模型 
    　　js代码操作浏览器

    window对象

    1.Window对象方法

    复制代码
    alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。
    复制代码

    使用方法：

    window.innerHeight  浏览器窗口的高度
600

    window.innerWidth 浏览器窗口的宽度
469

    window.open("https://www.baidu.com/","","height=400px") 指定URL可以跳转页面
Window {parent: Window, opener: Window, top: Window, length: 0, frames: Window, …}

    window.close() 一回车就关闭当前页面

    2.navigator对象

    对象方法

    navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

    使用方法：

    window.navigator.appName  
"Netscape"

    window.navigator.appVersion 
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36"

    window.navigator.userAgent  
"Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.106 Safari/537.36"

    window.navigator.platform  
"Win32"

    3.history对象

    对象方法

    history.forward()  // 前进一页
history.back()  // 后退一页

    4.location对象

    对象方法

    location 获取当前网页地址
    location.href  获取URL
location.href="URL" // 跳转到指定页面
location.reload() 重新加载页面

    弹出框

    可以在 JavaScript 中创建三种消息框：

    警告框：alert("你看到了吗？");
确认框：confirm("你确定吗？")
提示框：prompt("请在下方输入","你的答案")

    计时器相关

    • 过一段时间之后触发(一次)

    • 每隔一段时间触发一次(循环)

    <script>
    function func1() {alert(123)}
    let t = setTimeout(func1,3000);  // 毫秒为单位 3秒之后自动执行func1函数

    clearTimeout(t)      // 取消定时任务  如果你想要清除定时任务 需要日前用变量指代定时任务


    function func2() {alert(123)}
    function show(){let t = setInterval(func2,3000);  // 每隔3秒执行一次
        function inner(){clearInterval(t)  // 清除定时器}
        setTimeout(inner,9000)  // 9秒中之后触发 }
    show()
</script>

    DOM（Document Object Model） 　　

    　　文档对象模型  　　

    　　js代码操作标签

    DOM树

    所有的标签都可以称之为是节点
JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

    DOM操作需要用关键字document

     

    查找标签

    • 直接查找

    方法：

    getElementById     返回ID
getElementsByClassName   返回数组
getElementsByTagName      返回名称

    使用方法：

    document.getElementById('d1')      
<div id=​"d1">​…​</div>​

document.getElementsByClassName('c1')    
HTMLCollection [p.c1]0: p.c1length: 1__proto__: HTMLCollection
      
document.getElementsByTagName('div')    
HTMLCollection(3) [div#d1, div, div, d1: div#d1]
                              
let divEle = document.getElementsByTagName('div')[1]
divEle
<div>​div>div​</div>​
    • 间接查找

    方法：

    parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

    使用方法：

    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(标签名) ：创建一个指定名称的元素。
例：var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

2.添加节点
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)

把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);

3.删除节点
removeChild()：获得要删除的元素，通过父元素调用删除

4.替换节点
somenode.replaceChild(newnode, 某个节点);

    　　setAttribute() 设置属性
    　　getAttribute() 获取属性
    　　removeAttribute() 移除属性

    innerText与innerHTML

    //    文本属性
//  1.innerText:不管你是赋值还是取值，只能识别纯文本
        var a1 = document.getElementsByClassName('c2')[0];
//        console.log(a1);
        //取值操作
        console.log(a1.innerText); //你好吗/
        console.log(a1.innerHTML); //你好吗/
        //赋值操作
        a1.innerText='Egon';
        a1.innerHTML='<a href="">hello</a>';
//  2.innerHtml:既可以识别纯文本，也可以识别标签
        var b1 = document.getElementsByClassName('c2')[1];
//        console.log(b1);
        //取值操作
        console.log(b1.innerText);
        console.log(b1.innerHTML);
        //赋值操作
        b1.innerText = 'lala';
        b1.inn
    erHTML = '    <input type="text">';

    获取值操作

    通过value获取数据

    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);

    class操作

    方法：

    className  获取所有样式类名(字符串)
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

    使用方法：

    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')  # 验证是否包含某个类属性

divEle.classList.contains('c2')

divEle.classList.toggle('bg_red')  # 有则删除无则添加

    css操作

    方法：

    pEle.style.color 字体颜色

pEle.style.fontSize  字体大小

pEle.style.backgroundColor 背景颜色

pEle.style.border 边框

    使用方法：

    let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
"red"
pEle.style.fontSize = '28px'
"28px"
pEle.style.backgroundColor = 'yellow'
"yellow"
pEle.style.border = '3px solid red'
"3px solid red"

     Event(事件)

    　　　　达到某个事先设定的条件 自动触发的动作

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

onfocus        元素获得焦点。               
onblur         元素失去焦点。               
onchange       域的内容被改变。             
onkeydown      某个键盘按键被按下。         
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击
    绑定事件的两种方式：
    第一种方式：
    <button onclick="func1()">点我</button>

    function func1() {
        alert(111)
    }

    第二种方式：

    <button id="d1">点我</button>

let btnEle = document.getElementById('d1');
    btnEle.onclick = function () {
        alert(222)

    原生js事件绑定

    开关灯案例

    <style>
        .c1{
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color: green;
        }
        .bg_red{
            background-color: red;
        }

    </style>
</head>
<body>

    <div id="d1" class="c1 bg_red "></div>
    <button id="d2">变色</button>

    <script>
        let btnEle = document.getElementById('d2')
        let divEle = document.getElementById('d1')
        btnEle.onclick = function () {  // 绑定点击事件
            // 动态的修改div标签的类属性
            divEle.classList.toggle('bg_red')
        }
    </script>

</body>
</html>

    input框获取焦点失去焦点案例

    <input type="text" value="你还在嘛" id="d1">

<script>
    let iEle = document.getElementById('d1')
    // 获取焦点事件
    iEle.onfocus = function () {
        // 将input框内部值去除
        iEle.value = ''
        //  点value就是获取   等号赋值就是设置
    }
    // 失去焦点事件
    iEle.onblur = function () {
        // 给input标签重写赋值
        iEle.value = '在!'
    }
</script>

    实时展示当前时间

    <input type="text" id="d1" style="display: block;height: 50px; 200px">
<button id="d2">开始</button>
<button id="d3">结束</button>

<script>
    // 先定义一个全局存储定时器的变量
    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();
        inputEle.value = currentTime.toLocaleString()
    }

    startBtnEle.onclick = function () {
        // 限制定时器只能开一个
        if(!t){
            t = setInterval(showTime,1000)  // 每点击一次就会开设一个定时器 而t只指代最后一个
        }
    }
    endBtnEle.onclick = function () {
        clearInterval(t)
        // 还应该将t重置为空
        t = null
    }
</script>

    省市联动

    <!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 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(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
        // 获取对应的市信息
        let currentCityList = data[currentPro]
        // 清空市select中所有的option
        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>
  • 相关阅读:
    Thinking in java Chapter10 内部类
    策略设计模式 Strategy模式
    Thinking in java Chapter9 接口
    Thinking in java Chapter8 多态
    Thinking in java Chapter7 复用类
    mock服务
    文件的使用方式
    字符编码与文件处理方式
    各容器类型及内置方法
    python各数据类型及内置方式：
  • 原文地址：https://www.cnblogs.com/zhenghuiwen/p/12913400.html
Copyright © 2020-2023  润新知