02月27日作业：DOM和事件的原理和应用

作业一（文档对象模型DOM）

DOM参考手册：
https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
一：节点相关知识：
1、节点时DOM树种的最小单元：节点是有类型的：元素、文本、文档、注释、片段等
2、document:（window.document）获取文档；定义的快速入口:

document.doctype:获得文档类型
document.documentElement:获取文档种的根节点
document.head:获取head节点
document.body:获取body节点
document.title:获取head中的title节点
document.links:获取a链接的节点；

二、获取页面元素的方式：
1、标签名：返回一个html对象集合：

语法：document.getElementsByTagName()
访问返回集合中的元素：索引数组方式和item(n)

2、ID:返回一个对象

语法：document.getElementById(id)替代语法：用标签名访问返回对象集合在用namedItem(id)访问，namedItem()也可以访问name属性来返回；
允许在元素级别上调用getElementsByTagName()和getElementById()

3、class：返回一个html集合，类数组

语法：getElementsByClassName()
访问返回集合中的元素：索引数组方式和item(n)

4、直接使用css选择器来获取元素：

语法：query.Selector()返回匹配选择器的第一个元素和 query.SelectorAll()返回所有匹配选择器的元素集合NodeList;
访问方式：可以通过forEach()访问和item(n);

三、元素的类型和节点的属性
1、页面返回二种类型的集合：HTMLCollection,NodeList;
2、Node节点（元素节点、属性、文本节点）对象有三个非常重要的属性：nodeName,nodeType,nodeValue(只有文本节点时，这个属性才有意义)；
3、childnodes：返回值种包括了所有类型的节点（Tips:换行符会当成文本节点）
4、firstChild:第一个子节点；lastChild：最后一个子节点；childElementCount:统计html标签元素的数量；children:返回html标签元素的集合
5、Array.from():将类数组转为真正的数组对象
6、firstElemetChild:获取第一个子元素；lastElementChild:获取最后一个子元素；
children.item():获取任何一个子元素：也可以用索引访问
7、访问父节点：parentNode；访问父元素parentElement；
四、元素的添加和删除：
1、元素的添加步骤：

创建元素：var h2=createElement('h1');
给元素添加内容：h2.innerHTML='我是元素内容';
添加元素到页面中（已存在的父节点中）：document.body.appendChild(h2);

2、利用片段优化添加多个元素：

创建片段：var frag=document.createDocumentFragment();
利用循环把元素(li)加载到临时挂在点上：即文档片段上:frag.appendChild(li);(tips:片段（挂载点）可以接受多个元素)

3、添加挂载点到文档中（父节点中）；ul.appendChild(frag);
五、事件
1、html标签属性：onclick="alert()"点击触发弹窗；
2、事件监听函数：addEventListener(时间名称自付串,事件的回调函数,false(触发模式：冒泡));
扩充：ev.type：事件的行为；ev.target:获取发生事件的对象
3、禁用点击后ev的默认事件：ev.preventDefault();
4、获取焦点：focus();去除首位空格：trim();length:长度属性;
5、insertBefore(要插入的元素,要插入元素的位置：那个元素之前);
6、this.event.preventDefault();禁用当前事件的默认行为；
7、removeChild();移除函数；
8、confirm():获取（弹窗提示确认和取消）的函数；确认返回true,取消返回false;

作业二

一、代码练习：
1.1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象</title>
</head>
<body>
    <div id="list">
        <ul class="poster">
            <li name="active">战胜疫情, 指日可待</li>
            <li>全民动员, 支持国家</li>
            <li>我宅家,我骄傲,我为国家省口罩</li>
        </ul>
    </div>
    <script>
        console.log(document);
        console.log(window.document);
        console.log(document.doctype);
        console.log(document.documentElement);
        console.log(document.head);
        console.log(document.body);
        console.log(document.title);
        console.log('获取页面元素…………………………………………')
        var ul=document.getElementsByTagName('li');
        console.log(ul);
        console.log(ul[1]);
        console.log(ul.item(2));
        var div=document.getElementById('list');
        console.log(div);
        // console.log(document.namedItem('list'));这是无法访问的
        var div= document.getElementsByTagName('div');
        console.log(div);
        console.log(div.namedItem('list'));
        var cla=document.getElementsByClassName('poster');
        console.log(cla);
        console.log(cla.item(0));
        var div = document.querySelector('#list');
        console.log(div);
        var lis=document.querySelectorAll('#list>.poster>li');
        console.log(lis);
        console.log(lis[2]);
        console.log(lis.item(1));
        console.log("^^^^^^^^^^^^^^^^^^")
        Array.from(lis).forEach(item=>console.log(item));
        Array.from(lis).forEach(function(item){console.log(item)});
        lis.forEach(function(item){console.log(item)});
    </script>
</body>
</html>

1.2运行结果图：

2.1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <h2>JavaScript</h2>
        <p>通用前端脚本语言</p>
        <li>学习让我感到很充实</li>
    </div>
    <p><a href="https://www.php.cn">PHP中文网</a></p>
    <script>
        var link=document.links;
        console.log(link);
        console.log(link.item(0));
        var a=link.item(0);
        console.log(a.nodeName);
        console.log(a.nodeType);
        console.log(a.nodeValue);
        console.log(a);
        console.log(a.firstChild.nodeValue);
        var div = document.querySelector('div');
        console.log(div);
        console.log('^^^^^^^^^^^^^^^^^^^^^^^^')
        div1=div.childNodes;
        console.log(div.childElementCount);
        console.log(div1.length);
        console.log(div1);
        Array.from(div1).forEach(item=>console.log(item));
        div2=div.children;
        console.log(div2);
        Array.from(div2).forEach(item=>console.log(item));
        console.log(div.firstElementChild);
        console.log(div.lastElementChild);
        console.log(div.children.item(1));
        console.log('……………………………………………………………………')
        var li=document.getElementsByTagName('li');
        console.log(li.item(0));
        console.log('父级元素/父级节点')
        console.log(li.item(0).parentElement);
        console.log(li.item(0).parentNode);
    </script>
</body>
</html>

2.2运行结果图

3.1代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="alert(this.firstChild.nodeValue)">点击我</button>
    <button>点我试试看</button>
    <a href="">PHP中文网</a>
    <script>
        var ul=document.createElement('ul');
        // h1.innerHTML='你好';
        document.body.appendChild(ul);
        // var ul = document.querySelector('ul');
        // console.log(ul);
        var frag=document.createDocumentFragment();
        for(var i=0;i<5;i++){
            var li = document.createElement('li');
            li.innerText='列表项'+(i+1);
            // console.log(li)
            frag.appendChild(li);
        }
        ul.appendChild(frag);
        var btn=document.querySelectorAll('button').item(1);
        // console.log(btn);
        btn.addEventListener('mouseover',function(ev){
            // console.log(ev.target);
            // console.log(ev.type);
            ev.target.style = 'width:100px;height:50;background: lightgreen;border:none;outline: none;'
        },false);
        btn.addEventListener('mouseout',function(ev){
            // console.log(ev.target);
            // console.log(ev.type);
            ev.target.style = 'none'
        },false);
        var link=document.links.item(0);
        link.onclick=function(cc){
            cc.preventDefault();
            btn.style.display='none';
        }
    </script>
</body>
</html>

3.2运行结果:

作业三

1、ToDoList案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ToDoList</title>
</head>
<body>
    <form action="" name="comment" method="post">
        <label for="content">请留言：</label>
        <input type="text" name="content">
        <button>提交</button>
    </form>
    <ul>
    </ul>
    <script>
        // 获取表单和ul
        var form=document.forms.namedItem('comment');
        var ul=document.querySelector('ul');
        // 监听submit提交事件，
        addEventListener('submit',function(ev){
            ev.preventDefault();
            var li=document.createElement('li');
            // li.innerHTML=form.content.value;
            // ul.appendChild(li);
            // 判断留言是否为空，空则不能添加
            if(form.content.value.trim().length===0){
                alert('留言不能为空');
                form.content.focus();
            }else{
                li.innerHTML=form.content.value+'<a href="" onclick="del(this)">删除</a>';
                // 判断ul是否有元素、分别处理
                if(ul.childElementCount===0){
                    // 无元素直接插入
                    ul.appendChild(li);
                }else{
                    // 有元素插入到第一个元素前面
                    ul.insertBefore(li,ul.firstElementChild);
                }
            }
            // 清空留言并获取焦点
            form.content.value='';
            form.content.focus();
        },false);
        function del(str){
            this.event.preventDefault();
            return confirm('是否删除？') ? ul.removeChild(str.parentElement):false;
        }
    </script>
</body>
</html>

2、运行结果：

作业一（文档对象模型DOM）

作业二

作业三

相关文章