11月13日笔记

节点对象的方法 Node.appendChild() 接收一个对象节点作为参数,将其作为最后一个节点,插入当前节点。
var addCountry = function() {
   var cinput = document.getElementById("country");
   var cvalue = cinput.value;
   var cli = "<li id='" + cvalue + "'>" + cvalue + "</li>";
   var culInnerHtml = document.getElementById("_asia").innerHTML;
    culInnerHtml = culInnerHtml + cli;
    document.getElementById("_asia").innerHTML = culInnerHtml;
};

var addCountry2 = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;

    var cli = document.createElement("li");
    cli.innerHTML = cvalue;
    document.getElementById("_asia").appendChild(cli);
};
Node.hasChildNodes() 返回一个布尔值,判断当前节点是否有子节点。
var _asiaUl = document.getElementById("_asia");
if (_asiaUl.hasChildNodes()) {
    _asiaUl.innerHTML = "";
}
Node.insertBefore() 方法用于将某个节点插入当前节点的指定位置。接收两个参数,第一个参数是所要插入的节点,第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。
var getIndexLi = function(index) {
    var _asiaChilds = document.getElementById("_asia").childNodes;
    var k = 1;
   for (var i = 0; i < _asiaChilds.length; i++) {
      var cnode = _asiaChilds[i];
      if (cnode.nodeName === 'LI') {
            if (index === k) {
               return cnode;
         }
            k++;
      }
   }
}

var addCountry3 = function() {
    var cinput = document.getElementById("country");
    var cvalue = cinput.value;

    var cli = document.createElement("li");
    cli.innerHTML = cvalue;

    var _asiaEle = document.getElementById("_asia");
    var cindex = document.getElementById("cindex").value;
    var cele = getIndexLi(parseInt(cindex));

    _asiaEle.insertBefore(cli, cele);
};
Node.removeChild() 方法接收一个子节点作为参数,用于从当前节点移除该子节点。返回被移除的子节点。
var removeCountry1 = function(id) {
    var _asiaEle = document.getElementById("_asia");
    _asiaEle.removeChild(document.getElementById(id));
}
Node.replaceChild() 方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数,第一个参数是用来替换的新节点,第二个参数是将要被替换的节点。
var repalceCountry = function() {
   var newEle = document.createElement("LI");
   newEle.innerHTML = "Tailand";

    var _asiaEle = document.getElementById("_asia");
    _asiaEle.replaceChild(newEle, document.getElementById("_japan"));
}


`Element对象
1. 特征相关的属性
Element.id,Element.tagName,Element.innerHTML,Element.outerHTML(包含标签定义本身)
Element.className
Element.classList:add/remove/contains/toggle/item/toString
var toggleCred = function() { var cl = document.getElementById(“_div”).classList; // cl.toggle(“cred”); if (cl.contains(“cred”)) { cl.remove(“cred”); } else { cl.add(“cred”); } }

2.盒子模型相关属性
Element.clientHeight/clientWidth
返回元素可见部分的高度和宽度:注意包含了 padding 的值
Element.clientLeft/Top
获取元素左边框、顶部边框的宽度
3.相关节点的属性
Element.children
返回当前元素节点的所有子元素。
Element.childElementCount
返回当前元素节点所有子元素的个数。
var _asia = document.getElementById(“_asia”); console.log(_asia.children); console.log(_asia.childElementCount); console.log(_asia.children.length);

Element.firstElementChild/lastElementChild
Element.nextElementSibling/previousElementSibling

4.查找相关属性
Element.querySelector()
该方法接收 CSS 选择器作为参数,返回父元素第一个匹配的子元素。
  • China 
  • Korea 
  • Japan 
var _ali = document.getElementById(“_asia”).querySelector(“.t1”); console.log(_ali); // _korea

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

var _d1 = document.getElementById(“_d3”).closest(“.ddd”);
console.log(_d1.textContent); // _d1


5.其他方法
Element.remove()
将当前节点从 DOM 树上删除。``


Attribute 对象
HTML 元素中包含标签名和若干个键值对,这个键值对我们称为“属性”(Attribute)
在 DOM 中,我们很少直接对属性进行操作,一般都是元素节点对象(Element对象)来操作属性。
1.Element.attributes属性
返回一个类似数组的动态对象

示例:遍历元素节点的所有属性

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


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

var _abaidu = document.getElementById(“_abaidu”);
console.log(_abaidu.href); // http://www.baidu.com
console.log(_abaidu.target); // _blank
console.log(_abaidu.test); // undefined


虽然在Html中大小写是不敏感的,但是在 Javascript 中,属性大小写敏感,而且属性一般都是采用小写。
有些HTML属性名是 Javascript 的保留字,转为 Javascript 属性时,需要改名字,主要由class-className,for-htmlFor
3.属性操作的标准方法
getAttribute()
setAttribute()
上述两个方法对所有的属性都适用(包含用户自定义的方法)
_

abaidu.setAttribute(“href”,”http://www.sina.com“);
console.log(_abaidu.getAttribute(“href”));

_abaidu.setAttribute(“test”,”xxx”);
console.log(_abaidu.getAttribute(“test”));


hasAttribute()
removeAttribute()

4.dataset 属性
有时需要在 Html 上附加数据,供 Javascript 脚本使用。一种解决方法是自定义属性。
虽然自己随意定义的属性名可以通过相关的方法进行定义和赋值,但是会使得HTML元素的属性不符合规范,导致网页的HTML代码通不过校验。
更好的解决方法是,使用标准提供的data-*属性。
再使用元素对象的 dataset 属性对自定义的属性进行操作。
注意:data-后面的属性有限制,只能包含字母、数字、连词线(-)、点(.)、冒号(:)和下划线(_)。而且属性名不应该使用大写字母。比如data-helloWorld,我们不这么写,而写成data-hello-world。
在转成dataset的键名的时候,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。

console.log(_abaidu.getAttribute(“data-hello-world”));
console.log(_abaidu.dataset.helloWorld); // 驼峰命名


冒泡排序法(从大到小)

<script type="text/javascript">
        function lg(a){
        console.log(a)
        }
        var mm=new Array(12,124,354,32,43);
        for (i=1;i<mm.length;i++){
            for(j=0;j<mm.length-i;j++){
                if(mm[j]<mm[j+1]){
                var nn=mm[j];
                mm[j]=mm[j+1];
                mm[j+1]=nn;
                }
            }
        }
        lg(mm);
        </script>

coding coffee网页增加



    <title>CODING COFFEE</title>
    <style type="text/css">
        h1{
            color: blue;
            font-size: 60px;
            /*visibility: hidden;*/
            transition:font-size 5s;
            transition:transform 5s;
            }
        /*h1:hover{
            font-size: 500px;
            transform: rotate(360deg);
        }   */

        hr{
            width: 60%;
            border: 2px dashed #eee;
        }
        div{
            text-align: center;
        }
        p{
            text-align: left;
            text-indent: 2em;
            word-spacing: 5px;
            line-height: 50px;

        }
        .upper{
            text-transform: uppercase;
        }
        #ppp{
            vertical-align: middle;
        }

        .content-wrapper{
            width: 1000px;
            /*border: 2px solid red;*/
            /*border-width: 2px;
            border-style: dotted;
            border-color: red;*/
            margin:50px auto;
            padding:10px 20px 30px 40px;
            /*border: none;*/
            /*border-top: 2px solid red;*/
            box-shadow: 10px 10px 100px 10px #eee;


        }
        .img{
            float: left;
            width: 50%;

        }
        .para{
            float: right;
            width:50%;
        }
        /*span{
            padding-top: 50px;
            border: 2px solid red;
            background-color: green;
            display: block;

        }*/



    </style>
</head>
<body>


    咖啡名:
        <p>
            <input id="name" type="text" value="">
        </p>
        描述:
        <p>
            <textarea id="description" type="text" cols="20" rows="10"></textarea> 
        </p>
        图片地址:
        <p>
            <input id="img_url" type="text" value="">
        </p>


        <button onclick="addCoffee()">新增咖啡</button>
    <div id="wrap"><h1 id="main">CODING COFFEE MENU</h1>


        <hr>
        <div class="content-wrapper">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装,让你用自己喜爱的方式体验这<span>别具风味</span>的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>


    </div>
    <script type="text/javascript">
        function lg(a){
        console.log(a);
    }
        function addCoffee(){
            var name = document.getElementById('name').value;
            var desc = document.getElementById('description').value;
            var img_url = document.getElementById('img_url').value;
            var html1 = '<div class="content-wrapper"><div class="img"><img src="'+img_url+'"></div>';
            var html2 = '<div class="para"><h2>'+name+'</h2>';
            var html3 ='<p>'+desc+'</p></div>';
            var html4 = '<div style="clear: both;"></div></div><hr>';
            var add = html1+html2+html3+html4;
            var newhtml = document.getElementById('wrap').innerHTML+add;
            document.getElementById('wrap').innerHTML = newhtml;


        } 




    </script>
</body>


网页删除



    <title>CODING COFFEE</title>
    <style type="text/css">
        h1{
            color: blue;
            font-size: 60px;
            /*visibility: hidden;*/
            transition:font-size 5s;
            transition:transform 5s;
            }
        /*h1:hover{
            font-size: 500px;
            transform: rotate(360deg);
        }   */

        hr{
            width: 60%;
            border: 2px dashed #eee;
        }
        div{
            text-align: center;
        }
        p{
            text-align: left;
            text-indent: 2em;
            word-spacing: 5px;
            line-height: 50px;

        }
        .upper{
            text-transform: uppercase;
        }
        #ppp{
            vertical-align: middle;
        }

        .content-wrapper{
            width: 1000px;
            /*border: 2px solid red;*/
            /*border-width: 2px;
            border-style: dotted;
            border-color: red;*/
            margin:50px auto;
            padding:10px 20px 30px 40px;
            /*border: none;*/
            /*border-top: 2px solid red;*/
            box-shadow: 10px 10px 100px 10px #eee;


        }
        .img{
            float: left;
            width: 50%;

        }
        .para{
            float: right;
            width:50%;
        }
        /*span{
            padding-top: 50px;
            border: 2px solid red;
            background-color: green;
            display: block;

        }*/



    </style>
</head>
<body>


    咖啡名:
        <p>
            <input id="name" type="text" value="">
        </p>

        <button onclick="delCoffee()">删除咖啡</button>
    <div id="wrap"><h1 id="main">CODING COFFEE MENU</h1>


        <hr>
        <div class="content-wrapper" id="蓝山咖啡">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装,让你用自己喜爱的方式体验这<span>别具风味</span>的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper" id="拿铁咖啡">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>拿铁咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper" id="卡布奇诺">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para" >
                <h2>卡布奇诺</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>


    </div>
    <script type="text/javascript">
        function lg(a){
        console.log(a);
    }
        function delCoffee(){
            var name = document.getElementById('name').value;
            var delcontent=document.getElementById(name);
            document.getElementById('wrap').removeChild(delcontent);


        } 




    </script>
</body>


网页修改



    <title>CODING COFFEE</title>
    <style type="text/css">
        h1{
            color: blue;
            font-size: 60px;
            /*visibility: hidden;*/
            transition:font-size 5s;
            transition:transform 5s;
            }
        /*h1:hover{
            font-size: 500px;
            transform: rotate(360deg);
        }   */

        hr{
            width: 60%;
            border: 2px dashed #eee;
        }
        div{
            text-align: center;
        }
        p{
            text-align: left;
            text-indent: 2em;
            word-spacing: 5px;
            line-height: 50px;

        }
        .upper{
            text-transform: uppercase;
        }
        #ppp{
            vertical-align: middle;
        }

        .content-wrapper{
            width: 1000px;
            /*border: 2px solid red;*/
            /*border-width: 2px;
            border-style: dotted;
            border-color: red;*/
            margin:50px auto;
            padding:10px 20px 30px 40px;
            /*border: none;*/
            /*border-top: 2px solid red;*/
            box-shadow: 10px 10px 100px 10px #eee;


        }
        .img{
            float: left;
            width: 50%;

        }
        .para{
            float: right;
            width:50%;
        }
        /*span{
            padding-top: 50px;
            border: 2px solid red;
            background-color: green;
            display: block;

        }*/



    </style>
</head>
<body>

    修改哪个咖啡:
    <p>
    <input id='typename' type="text" value="">
    </p>
    咖啡名:
        <p>
            <input id="name" type="text" value="">
        </p>
        描述:
        <p>
            <textarea id="description" type="text" cols="20" rows="10"></textarea> 
        </p>
        图片地址:
        <p>
            <input id="img_url" type="text" value="">
        </p>


        <button onclick="editCoffee()">修改咖啡</button>
    <div id="wrap"><h1 id="main">CODING COFFEE MENU</h1>


        <hr>
        <div class="content-wrapper" id="蓝山咖啡">
            <div class="img">
                <img src="./c2.jpg">

            </div>
            <div class="para">
                <h2>蓝山咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装,让你用自己喜爱的方式体验这<span>别具风味</span>的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper" id="拿铁咖啡">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>拿铁咖啡</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>
        <hr>
        <div class="content-wrapper" id="卡布奇诺">
            <div class="img">
                <img src="./c2.jpg">
            </div>
            <div class="para">
                <h2>卡布奇诺</h2>
                <p>
                    源自三地的咖啡豆,为周年纪念综合咖啡豆带来了特别的<span>馥郁醇厚</span>。如今推出三种不同包装,让你用自己喜爱的方式体验这别具风味的一杯。
                </p>
            </div>
            <div style="clear: both;"></div>
        </div>



    </div>
    <script type="text/javascript">
        function lg(a){
        console.log(a);
    }

        function editCoffee(){
            var typename=document.getElementById('typename').value;
            var parelement=document.getElementById(typename);
            var name = document.getElementById('name').value;
            var desc = document.getElementById('description').value;
            var img_url = document.getElementById('img_url').value;

            var newname =document.createElement('h2')
            newname.innerHTML=name;
            var newdes =document.createElement('p')
            newdes.innerHTML=desc
            var newimg =document.createElement('img')
            newimg.setAttribute('src',img_url)

            parelement.children[0].replaceChild(newimg,parelement.children[0].children[0])
            parelement.children[1].replaceChild(newname,parelement.children[1].children[0])
            parelement.children[1].replaceChild(newdes,parelement.children[1].children[1])




        } 




    </script>
</body>


“`

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值