11.13课堂笔记、作业以及学习心得

最新推荐文章于 2023-11-13 21:13:51 发布

huqiang0816

最新推荐文章于 2023-11-13 21:13:51 发布

阅读量219

点赞数

本文链接：https://blog.csdn.net/huqiang0816/article/details/78525504

版权

1、课堂笔记

1、节点对象的方法

1.1 Node.appendChild()

接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。

新增国家：<input id="country" type="text" value="">
<button onclick="addCountry()">新增国家</button>
<div class="asia asias" id="asia">
    <span id="china">China</span>
    <span id="korea">Korea</span>
    <span id="japan">Japan</span>
</div>
var addCountry = function(){
    var cinput = document.getElementById('country');
    var cvalue = cinput.value;
    var cspan = "<span id='"+cvalue+"'>"+cvalue+"</span>";
    var cuInnerHtml = document.getElementById('asia').innerHTML;
    cuInnerHtml = cuInnerHtml+cspan;
    document.getElementById('asia').innerHTML = cuInnerHtml;
}
var addCountry2 = function(){
    var cinput = document.getElementById('country');
    var cvalue = cinput.value;
    var cspan = document.createElement('span');
    cspan.innerHTML = cvalue;
    cspan.setAttribute('id',cvalue);
    document.getElementById('asia').appendChild(cspan);
}

1.2 Node.hasChildNodes()

返回一个布尔值，判断当前节点是否有子节点。

var asia = document.getElementById('asia');
if (asia.hasChildNodes()) {
    console.log('有子节点');
}

1.3Node.removeChild()

方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回被移除的子节点。

var removeCountry = function(){
    var id = document.getElementById('country').value;
    var asia =document.getElementById('asia');
    asia.removeChild(document.getElementById(id));
}

1.4 Node.replaceChild()

方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。

var replaceCountry = function(){
    var newEle = document.createElement('span');
    newEle.setAttribute('id','tailand');
    newEle.innerHTML = 'Tailand';
    var asia = document.getElementById('asia');
    asia.replaceChild(newEle,document.getElementById('japan'));                                              
}

1.5 createElenment()

给文本添加一个标签。

var cinput = document.getElementById('country');
var cvalue = cinput.value;
var cspan = document.createElement('span');

1.6 setAttribute()

添加属性。

cspan.innerHTML = cvalue;           cspan.setAttribute('id',cvalue);

2、Element对象

2.1 特征相关的属性

Element.id，Element.tagName，Element.innerHTML，Element.outerHTML（包含标签定义本身）
Element.className
Element.classList:add/remove/contains/toggle/item/toString

console.log(asia.outerHTML);
console.log(asia.tagName);
console.log(asia.className);
console.log(asia.classList);
asia.classList.add('aaa','bbb');
console.log(asia.classList.contains('bbb'));
console.log(asia.classList.item(3));
asia.classList.remove('bbb');

2.2 盒子模型相关属性

console.log(asia.clientHeight);
console.log(asia.clientWidth);
//返回元素可见部分的高度和宽度：注意包含了 padding 的值
console.log(asia.clientTop);
console.log(asia.clientLeft);
//获取元素左边框、顶部边框的宽度

2.3 相关节点的属性

Element.children
返回当前元素节点的所有子元素。
Element.childElementCount
返回当前元素节点所有子元素的个数。

var asia = document.getElementById('asia');
console.log(asia.childElementCount);
console.log(asia.firstElementChild);
console.log(asia.children.length);
console.log(asia.previousElementSibling);

2.4 查找相关属性

Element.querySelector()
该方法接收 CSS 选择器作为参数，返回父元素第一个匹配的子元素。

Element.querySelectorAll()
方法接收 CSS 选择器作为参数，返回一个 NodeList 对象，包含所有匹配的子元素。
Element.getElementsByTagName()
注意是标签的参数大小写不敏感
Element.getElementsByClassName()
方法接收类名，返回当前节点所有匹配类名的元素
Element.closest()
方法接收 CSS 选择器作为参数，返回当前元素节点最接近的父元素

 var asia = document.getElementById('asia').querySelector('span');
console.log(asia);
var asia = document.getElementById('asia').querySelectorAll('span');
console.log(asia);

2.5 其他方法

Element.remove()
将当前节点从 DOM 树上删除。

3、Attribute对象

HTML 元素中包含标签名和若干个键值对，这个键值对我们称为“属性”（Attribute）
在 DOM 中，我们很少直接对属性进行操作，一般都是元素节点对象（Element对象）来操作属性。

3.1 Element.attributes属性

返回一个类似数组的动态对象

var asia = document.getElementById("asia").nextElementSibling;
if (asia.hasAttributes()) {
   var asiaAtt = asia.attributes;
   for (var i = 0; i < asiaAtt.length; i++) {
        console.log(asiaAtt[i].name + ":" + asiaAtt[i].value);
    }
} else {
    console.log("No attributes To show!");
}

3.2 元素节点对象的属性

HTML元素节点的标准属性，会自动成为元素节点对象的属性。

var a_baidu = document.getElementById("a");
console.log(a_baidu.href); 
// http://www.baidu.com
console.log(a_baidu.target);
 // _blank
console.log(a_baidu.test); 
// undefined

虽然在Html中大小写是不敏感的，但是在 Javascript 中，属性大小写敏感，而且属性一般都是采用小写。
有些HTML属性名是 Javascript 的保留字，转为 Javascript 属性时，需要改名字，主要由class-className,for-htmlFor

3.3 属性操作的标准方法

getAttribute()
setAttribute()
上述两个方法对所有的属性都适用（包含用户自定义的方法）

a_baidu.setAttribute("href","http://www.sina.com");
console.log(a_baidu.getAttribute("href"));
a_baidu.setAttribute("test","xxx");
console.log(a_baidu.getAttribute("test"));

hasAttribute()
removeAttribute()

3.4 dataset属性

有时需要在 Html 上附加数据，供 Javascript 脚本使用。一种解决方法是自定义属性。
虽然自己随意定义的属性名可以通过相关的方法进行定义和赋值，但是会使得HTML元素的属性不符合规范，导致网页的HTML代码通不过校验。
更好的解决方法是，使用标准提供的data-*属性。
再使用元素对象的 dataset 属性对自定义的属性进行操作。

*注意：data-后面的属性有限制，只能包含字母、数字、连词线（-）、点（.）、冒号（:）和下划线(_)。而且属性名不应该使用大写字母。比如data-helloWorld，我们不这么写，而写成data-hello-world。
在转成dataset的键名的时候，连词线后面如果跟着一个小写字母，那么连词线会被移除，该小写字母转为大写字母，其他字符不变。*

console.log(a_baidu.getAttribute("data-hello-world"));
console.log(a_baidu.dataset.helloWorld);

11.13作业

完成CODING COFFEE菜单页的增删改功能。

（1）html部分

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Coffee Mune</title>
  <link type="text/css" rel="stylesheet" href="../css/list.css"></link>
 </head>
 <body>
    <div class="act">
        <div class="add">
          咖啡名：<p><input id="name" type="text" value=""></p>
          主题：<p><input id="aaa" type="text" value=""></p>
          小标题：<p><input id="bbb" type="text" value=""></p>
          图片地址：<p><input id="img_url" type="text" value=""></p>
          描述：<p><textarea id="description" type="text" cols="20" rows="10"></textarea></p>
          <button onclick="addCoffee()">新增咖啡</button>
          <button onclick="correctCoffee()">修改咖啡</button>
        </div>
        <div class="remove">
          咖啡名：<p><input id="removeName" type="text" value=""></p>
          <button onclick="removeCoffee()">删除咖啡</button>
        </div>
   </div>

  <div id="index">
      <h1 id="title">Coding Coffee欢迎您！</h1>
      <div id="parent1">
          <div class="parent" >
            <div class="left" id="left1">
                <img src="../img/c2.jpg">
            </div>

            <div class="right" id="right1">
                <h2 class="smallTitle" id="smallTitle1">蓝山咖啡</h2>
                <p class="theme">
                    当季新品
                </p>

                <p class="bigTheme">
                    给咖啡多一口热爱！
                </p>

                <p class="smallTheme">
                    纯蓝山咖啡口感、香味较淡，但喝起来却非常香醇精致；
                    具有贵族的品味，乃咖啡中之极品。
                </p>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>

        <div id="parent2">
          <div class="parent">
            <div class="left" id="left2">   
                <img src="../img/c5.jpg">
            </div>

            <div class="right" id="right2">
                <h2 class="smallTitle" id="smallTitle2">卡布其诺</h2>
                <p class="theme">
                    美好邂逅
                </p>

                <p class="bigTheme">
                    给咖啡多一口热爱！
                </p>

                <p class="smallTheme">
                    卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶
                    相混合的意大利咖啡。此时咖啡的颜色，就象卡布奇诺教会的
                    修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。
                </p>
            </div>
            <div style="clear:both;"></div>
          </div>
         </div>

        <div id="parent3">
            <div class="parent">
                <div class="left" id="left3">
                    <img src="../img/c6.jpg">
                </div>

                <div class="right" id="right3">
                    <h2 class="smallTitle" id="smallTitle3">拿铁咖啡</h2>

                    <p class="theme">
                        经典再现
                    </p>

                    <p class="bigTheme">
                        给咖啡多一口热爱！
                    </p>

                    <p class="smallTheme">
                        拿铁是最为国人熟悉的意式咖啡品项，它是在沉厚浓郁的意式
                        浓缩咖啡中，加入牛奶等调和，甚至更多牛奶的花式咖啡，有了
                        牛奶的温润调味，让原本甘苦的咖啡变得柔滑香甜、甘美浓郁。
                    </p>
                </div>
                <div style="clear:both;"></div>
            </div>
        </div>

        <div id="parent4">
            <div class="parent">
                <div class="left" id="left4">
                    <img src="../img/c4.jpg">
                </div>

                <div class="right" id="right4">
                    <h2 class="smallTitle" id="smallTitle4">欧蕾咖啡</h2>
                    <p class="theme">
                        恬淡悠闲
                    </p>

                    <p class="bigTheme">
                        给咖啡多一口热爱！
                    </p>

                    <p class="smallTheme">
                        欧蕾咖啡最大的特点就是它要求牛奶和浓缩咖啡一同注入杯中，
                        牛奶和咖啡在第一时间相遇，碰撞出的是一种闲适自由的心。
                    </p>
                </div>

                <div style="clear:both;"></div>
            </div>
        </div>

        <div id="parent5">
            <div class="parent">
                <div class="left" id="left5">
                    <img src="../img/c7.jpg">
                </div>

                <div class="right" id="right5">
                    <h2 class="smallTitle" id="smallTitle5">猫屎咖啡</h2>
                    <p class="theme">
                        奢华享受
                    </p>

                    <p class="bigTheme">
                        给咖啡多一口热爱！
                    </p>

                    <p class="smallTheme">
                        麝香猫咖啡（Kopi Luwak），又称猫屎咖啡，它是由麝香猫
                        在吃完咖啡果后把咖啡豆原封不动的排出，人们把它的粪便
                        中的咖啡豆提取出来后进行加工而成。
                    </p>
                <div>
                <div style="clear:both;"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/list.js"></script>
 </body>
</html>

（2）js部分

var addCoffee=function(){
    var name=document.getElementById("name").value;
    var aaa=document.getElementById("aaa").value;
    var bbb=document.getElementById("bbb").value;
    var img_url=document.getElementById("img_url").value;
    var description=document.getElementById("description").value;
    var html1='<div class="parent"><div class="left"><img src="'+img_url+'"></div>';
    var html2='<div class="right"><h2 class="smallTitle">'+name+'</h2>';
    var html3='<p class="theme">'+aaa+'</p>';
    var html4='<p class="bigTheme">'+bbb+'</p>';
    var html5='<p class="smallTheme">'+description+'</p></div>';
    var html6='<div style="clear:both;"></div></div>';
    var add=html1+html2+html3+html4+html5+html6;
    var newHtml=document.getElementById("index").innerHTML+add;
    document.getElementById("index").innerHTML=newHtml;
}

var removeCoffee=function(){
    var name=document.getElementById("removeName").value;
    for(var i=1;i<6;i++){
        var abc=document.getElementById("smallTitle"+i).textContent;
        //console.log(abc);
        if(abc==name){
            document.getElementById("parent"+i).innerHTML="";
        }
    }
}


var correctCoffee=function(){
    var name=document.getElementById("name").value;
    var aaa=document.getElementById("aaa").value;
    var bbb=document.getElementById("bbb").value;
    var img_url=document.getElementById("img_url").value;
    var description=document.getElementById("description").value;
    var html1='<div class="parent"><div class="left"><img src="'+img_url+'"></div>';
    var html2='<div class="right"><h2 class="smallTitle">'+name+'</h2>';
    var html3='<p class="theme">'+aaa+'</p>';
    var html4='<p class="bigTheme">'+bbb+'</p>';
    var html5='<p class="smallTheme">'+description+'</p></div>';
    var html6='<div style="clear:both;"></div></div>';
    var correct=html1+html2+html3+html4+html5+html6;
    for(var i=1;i<6;i++){
        var abc=document.getElementById("smallTitle"+i).textContent;
        //console.log(abc);
        if(abc==name){
            document.getElementById("parent"+i).innerHTML=correct;
        }
    }
}

（3）css部分

        body{
            background-color:#fdffff;
        }

        #title{
            color:green;
            font-size:60px;
            text-align:center;
        }

        .smallTitle{
            color:blue;
            font-size:35px;
            text-align:center;
        }

        .theme{
            color:#ff8040;
            font-size:15px;
        }

        .bigTheme{
            color:#00aeae;
            font-size:30px;
        }

        .smallTheme{
            font-size:20px;
            font-family:"Times New Roman";
        }

        .parent{
            width:900px;
            height:400px;
            /*border:2px solid red;*/
            margin:0 auto;
            background-color:#fbfffd;
        }

        .left{
            float:left;
            width:400px;
            height:400px;
        }
        .right{
            float:right;
            width:450px;
            height:400px;
        }

11.13学习心得

通过今天的学习，我初步认识字节对象的方法还有Element对象、Attribute对象。要多练习，多写代码，加深记忆。

huqiang0816

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11.13课堂笔记、作业以及学习心得

1、课堂笔记1、节点对象的方法1.1 Node.appendChild()接收一个对象节点作为参数，将其作为最后一个节点，插入当前节点。新增国家：<input id="country" type="text" value=""><button onclick="addCountry()">新增国家</button><div class="asia asias" id="asia"> <s
复制链接

扫一扫