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

Community Learn Tools Library Leisure

English

Home > List of blog posts > 02月27日作业：DOM和事件的原理和应用

Blogger Information

Blog 145

fans 7

comment 7

visits 164611

Special Recommendation

More>

Related recommendations

作业一（文档对象模型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、运行结果：

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：更多的dom原生操作可以查手册, MDN,或者阅读:JavaScript权威指南, JavaScript高级程序设计

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

12月29日练习：php中文网footer案例（组件footer）

2019-12-29 13:35:19