JavaScript-DOM（下）

节点操作

1、父节点
node.parentNode
parentNode属性可返回某节点最近的一个的父节点
如果指定的节点没有父节点则返回null
2、子节点
 1.子节点childNode 所有的子节点，包含元素节点 文本节点等等
 2.children 获取所有的子元素节点（常用）
3、获取第一个元素和最后一个元素
 1.firstChild第一个子节点 不管是文本节点还是元素节点
    ol.firstChild
    ol.lastChild
 2.firstElementChild 返回第一个子元素节点
    ol.firstElementChild
    ol.lastElementChild
 3.实际开发的写法  既没有兼容性问题又返回第一个子元素
    ol.children[0]
    ol.children[ol.children.length -1]
4、兄弟节点
 1.nextSibling(previousSibling) 上下兄弟节点，包含元素节点或者文本节点
 2.nextElementSibling(previousElementSibling) 得到上下兄弟元素节点（有兼容性问题）
5、创建和添加元素节点
<ul>
    <li>1</li>
</ul>
​
// 1.创建元素节点
let li = document.createElement('li');
// 2.添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
let ul = document.querySelector('ul');
ul.appendChild(li);
// 3.添加节点 node.insertBefore(child,指定元素);
let li2 = document.createElement('li');
ul.insertBefore(li2,ul.children[0]);
// 4.添加新的元素的步骤：1.创建元素 2.添加元素
6、下拉菜单
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
​
        li {
            list-style-type: none;
        }
​
        a {
            text-decoration: none;
            font-size: 14px;
        }
​
        .nav {
            margin: 100px;
        }
​
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
​
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
​
        .nav>li>a:hover {
            background-color: #eee;
        }
​
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
​
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
​
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>
​
<body>
<ul class="nav">
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">微博</a>
        <ul>
            <li>
                <a href="">私信</a>
            </li>
            <li>
                <a href="">评论</a>
            </li>
            <li>
                <a href="">@我</a>
            </li>
        </ul>
    </li>
</ul>
​
<script>
    // 1. 获取元素
    let nav = document.querySelector('.nav');
    let lis = nav.children; // 得到4个小li
    // 2.循环注册事件
    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function() {
            this.children[1].style.display = 'block';
        }
        lis[i].onmouseout = function() {
            this.children[1].style.display = 'none';
        }
    }
</script>
​
​
</body>
​
</html>

image-20220301175015792

7、简易留言板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;
            position: relative;
            margin: 100px auto;
        }
        textarea{
            width: 300px;
            height: 200px;
        }
        ol>li{
            background-color: deeppink;
            position: relative;
            top: 20px;
            left: -25px;
            line-height: 30px;
        }
    </style>
</head>
<body>
<div id="box">
    <p><strong>我是留言板</strong></p>
<textarea></textarea>
<button type="submit">发布</button>
<ol>
​
</ol>
</div>
    <script>
        // 1.获取元素
        let btn = document.querySelector('button');
        let text = document.querySelector('textarea');
        let ol = document.querySelector('ol');
        // 2.注册事件
        btn.onclick = function () {
            if (text.value === ''){
                alert('你啥都没有输入！')
            }else {
                //（1）创建元素
                let li = document.createElement('li');
                // 先有li才能赋值
                li.innerHTML = text.value;
                //（2）添加元素
                ol.insertBefore(li,ol.children[0]);
                text.value = '';
            }
        }
    </script>
</body>
</html>

image-20220301190030029

8、删除节点
node.removeChild(child)
node.removeChile()方法从DOM中删除一个子节点，返回删除的节点
9、删除留言案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 400px;
            position: relative;
            margin: 100px auto;
        }
        textarea{
            width: 300px;
            height: 200px;
        }
        ol>li{
            
            position: relative;
            top: 20px;
            left: -25px;
            line-height: 30px;
        }
        li a{
            float: right;
            color: black;
        }
    </style>
</head>
<body>
<div id="box">
    <p><strong>我是留言板</strong></p>
    <textarea></textarea>
    <button type="submit">发布</button>
    <ol>

    </ol>
</div>
<script>
    // 1.获取元素
    let btn = document.querySelector('button');
    let text = document.querySelector('textarea');
    let ol = document.querySelector('ol');
    // 2.注册事件
    btn.onclick = function () {
        if (text.value === ''){
            alert('你啥都没有输入！')
        }else {
            //（1）创建元素
            let li = document.createElement('li');
            // 先有li才能赋值
            li.innerHTML = text.value + "<a href= 'javascript:;'>删除</a>";
            //（2）添加元素
            ol.insertBefore(li,ol.children[0]);
            text.value = '';
            // （3）删除元素 删除的是当前链接的li（它的父级元素）
            let del = document.querySelectorAll('a');
            for (let i = 0;i < del.length;i++){
                del[i].onclick = function () {
                    // 删除的是li 当前a所在的li this.parentNode
                    ol.removeChild(this.parentNode);
                }
            }
        }
    }
</script>
</body>
</html>

image-20220301220556849

10、克隆节点
let ul = document.querySelector('ul');
// 1.node.cloneNode();括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2.node.cloneNode();括号为true 深拷贝 复制标签和复制里面的内容
let lis = ul.children[0].cloneNode(true);
ul.appenChild(lis);
11、动态生成表格案例
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            
        }
    </style>
</head>

<body>
<table cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<script>
    let datas = [
    {
      name:'清蒸小丑鹅',
      subject:'javascript',
      score:100
    }, {
        name:'红烧小帅鸭',
        subject:'javascript',
        score:99
    }, {
        name:'一只呆头鹅',
        subject:'javascript',
        score:88
    }, {
        name:'柴犬阿童',
        subject:'javascript',
        score:100
    }
]

    //添加行列和填充数据

    let tbody = document.querySelector('tbody');
    for (let i = 0;i < datas.length ;i++){
        let tr = document.createElement('tr');
        tbody.appendChild(tr);
        for (let j in datas[i]){
            let td = document.createElement('td');
            td.innerHTML = datas[i][j];
            tr.appendChild(td);
        }
        let td = document.createElement('td');
        td.innerHTML = '<a href="javascript:;">删除</a>';
        tr.appendChild(td);
    }

    //删除操作
    let del = tbody.querySelectorAll('a');
    for (let i = 0; i < del.length ;i++ ){
        del[i].onclick = function(){
            tbody.removeChild(this.parentNode.parentNode);
        }
    }
    
    //表格鼠标移动变色
    let trs = tbody.querySelectorAll('tr');
    for (let i = 0;i < trs.length;i++){
        trs[i].onmouseover = function () {
            this.style.backgroundColor = 'pink';
        }
        trs[i].onmouseout = function () {
            this.style.backgroundColor = '';
        }
    }
</script>
</body>

</html>

image-20220302001711610

12、document.write创建元素（了解）
document.write() 创建元素 如果页面流加载完毕，再调用这句话会导致页面重绘
三种动态创建元素的区别
document.write()
element.innerHTHL
document.createElemenet()
区别
1、document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面重新重绘
2、innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
3、innerHTML创建多个元素效率更高（不要拼接字符串，采取数组式拼接），结构稍微复杂
4、createElement()创建多个元素效率稍低一点点，但是结构更清晰
13、DOM重点核心

image-20220302195804146

image-20220302195904345

 

image-20220302195932912

image-20220302195953983

image-20220302200016277

image-20220302200104446

image-20220302200127932

14、注册事件
//事件监听注册事件addEventListener
// (1)里面的事件类型是字符串，必定加引号且不带on
// (2)同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
let btn = document.querySelector('button');
btn.addEventListener('click',function () {
    alert("1111");
})
btn.addEventListener('click',function () {
    alert("2222");
})
15、解绑事件
let d = document.querySelectorAll('div');
// 1、传统方法
d[0].onclick = function () {
    alert('1');
    d.onclick = null;
}
// 2、现在
d[1].addEventListener('click',fn)
function fn() {
    alert('2');
    d[1].removeEventListener('click',fn);
}
// ie兼容性
d[2].attachEvent('onclick',fn1);
function fn1(){
    alert('33');
    d[2].detachEvent('onclick',fn1);
}
16、DOM事件流三个阶段
// dom事件流三个阶段
// 1.JS代码中只能执行补获或者冒泡其中的一个阶段
// 2.onclick和attachEvent(ie)只能得到冒泡阶段
// 3.捕获阶段 如果addEventListener第三个参数是true那么则处于捕获阶段 document -> html -> body -> father -> son
// 4.冒泡阶段 如果addEventListener第三个参数是false或者省略那么则处于冒泡阶段  son -> father -> body -> html -> document
17、事件对象
let div = document.querySelector('div');
div.onclick = function (e) {
    console.log(e);
}

image-20220302221420470

18、阻止默认事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<a href="www.baidu.com">百度</a>
​
<script>
    let a = document.querySelector('a');
    a.addEventListener('click',function (e) {
        e.preventDefault(); //阻止a链接跳转(默认事件)
    })
</script>
</body>
</html>
19、阻止冒泡事件
son.addEventListener('click',function(e){
    alert('son');
    e.stopPropagation() //stop停止 propagation 传播
    e.cancelBubble = true; //非标准 cancel 取消 bubble 泡泡
})
20、禁止复制文字（鼠标右键和选中）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
这是不能复制的一段文字
<script>
    // 1、禁止鼠标右键
    document.addEventListener('contextmenu',function (e) {
        e.preventDefault();
    })
    // 2、禁止选中
    document.addEventListener('selectstart',function (e) {
        e.preventDefault();
    })
</script>
​
</body>
</html>
21、鼠标事件对象

image-20220303152838794

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
    </style>
</head>
<body>
    <script>
        document.addEventListener('click',function (e) {
            // 1、client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('--------------');
​
            // 2、page 鼠标在页面的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('--------------');
​
            // 3、screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
            console.log('--------------');
        })
    </script>
</body>
</html>

image-20220303153711379

22、天使随着鼠标移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            position: absolute;
        }
    </style>
</head>
<body>
<img src="images/angel.gif">
​
<script>
    let img = document.querySelector('img');
    document.addEventListener('mousemove',function (e) {
        let x = e.pageX;
        let y = e.pageY;
        img.style.left = x - 50 +'px';
        img.style.top = y - 40 +'px';
    })
</script>
</body>
</html>

image-20220303160403800

23、键盘事件

image-20220303155331002

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
​
        document.addEventListener('keyup',function (e) {
            console.log('keyup:'+e.key);
            if (e.key === 'p'){
                alert('你按下了p键');
            }else {
                alert('请按下p键');
            }
        })
        document.addEventListener('keypress',function (e) {
            console.log('keypress:'+e.key);
        })
    </script>
</body>
</html>
24、模拟京东按s键搜索框获取光标
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
    <script>
        let search = document.querySelector('input');
        document.addEventListener('keyup',function (e) {
            if (e.key === 's'){
                search.focus() // 搜索框获得焦点：使用js里面的focus()方法
            }
        })
    </script>
</body>
</html>
25、模拟京东快递单号查询
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
​
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
​
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgba(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
​
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>
​
<body>
<div class="search">
    <div class="con"></div>
    <input type="text" placeholder="请输入您的快递单号" class="jd">
</div>
<script>
    // 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的字号更大）
    // 表单检测用户输入： 给表单添加键盘事件
    // 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
    // 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
    let input = document.querySelector('.jd');
    let con = document.querySelector('.con');
    input.addEventListener('keyup',function () {
        if (this.value === ''){
            con.style.display = 'none';
        }else {
            con.innerHTML = this.value;
            con.style.display = 'block';
        }
    })
    // 获得焦点且输入框里面有内容就显示
    input.addEventListener('focus',function () {
        if (this.value !== ''){
            con.style.display ='block';
        }
    })
    // 失去焦点就隐藏
    input.addEventListener('blur',function () {
        con.style.display = 'none';
    })
</script>
</body>

 

posted @ 2022-03-03 16:53  小鹅爸爸  阅读(140)  评论(0)  编辑  收藏  举报