JavaScript第四天

兄弟節(jié)點(diǎn)

<span>我是span1</span>
<div>我是div</div>
<span>我是span2</span>
<script>
    var div = document.querySelector('div')
    // 下一個(gè)兄弟節(jié)點(diǎn)盲镶, 包含 元素節(jié)點(diǎn)摔癣、文本節(jié)點(diǎn)等等
    console.log(div.nextSibling)
    console.log(div.previousSibling)
    // 得到上诗鸭、下一個(gè)兄弟元素節(jié)點(diǎn)
    console.log(div.nextElementSibling)
    console.log(div.previousElementSibling)
</script>
![](https://upload-images.jianshu.io/upload_images/13248401-856ce1e7320f8fcf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

創(chuàng)建節(jié)點(diǎn)

添加節(jié)點(diǎn)

image
<script>
    // 1赏表、創(chuàng)建節(jié)點(diǎn)值元素節(jié)點(diǎn)
    var li=  document.createElement('li')
    // 2.添加節(jié)點(diǎn)  node.appendChild(Child) node 父級(jí)  Child是子集除秀,append后面追加
    var ul = document.querySelector('ul')
    ul.appendChild(li)

    // 添加節(jié)點(diǎn)
    // node.insertBefore(child, 指定元素)
    var lili  =  document.createElement('li')
    ul.insertBefore(lili, ul.children[0])

    // 總結(jié) 我們想要在頁(yè)面中添加一個(gè)元素 1/創(chuàng)建節(jié)點(diǎn) 2.添加元素
</script>

留言發(fā)布案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>發(fā)布</button>
<ul></ul>
<script>
    // 獲取元素
    var btn = document.querySelector('button')
    var text = document.querySelector('textarea')
    var ul = document.querySelector('ul')
    // 注冊(cè)事件
    btn.onclick =function () {
       // console.log( text.value)
        if (text.value == ''){
            alert('您啥也沒寫就發(fā)布祝高?')
            return false;
        }else {
            // 創(chuàng)建 li
            var li = document.createElement('li')
            // console.log( text.value)
            // 先有 li 才能賦值
            li.innerHTML = text.value
            // 添加元素
            // ul.appendChild(li)
            ul.insertBefore(li, ul.children[0])
        }
    }
</script>
</body>
</html>

生成表格案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 600px;
            cursor: pointer;
        }

        table td {
            text-align: center;
        }

        table th {
            background-color: blueviolet;
        }

        table tr {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="dv">
    請(qǐng)輸入姓名:
    <input type="text" value="" id="uname"/>
    <br/> 請(qǐng)輸入郵箱:
    <input type="text" value="" id="email"/>
</div>

<input type="button" value="添加" id="btn"/>
<table border="1" cellpadding="0" cellspacing="0" id="tb">
    <thead>
    <tr>
        <th>姓名</th>
        <th>郵箱</th>
    </tr>
    </thead>
    <tbody id="tbd">
    <tr>
        <td>小黑</td>
        <td>xiaohei@126.com</td>
    </tr>
    <tr>
        <td>小黑2</td>
        <td>xiaohei@126.com</td>
    </tr>
    </tbody>
</table>
<script>
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        // console.log('haha')
        // 獲取文本框的內(nèi)容
        var uname = document.getElementById('uname')
        var email = document.getElementById('email')
        if (uname.value == '' || email.value == '') {
            alert('信息不完整')
            return false;
        }

        // 創(chuàng)建列
        var td1 = document.createElement('td')
        td1.innerHTML = uname.value
        var td2 = document.createElement('td')
        td2.innerHTML = email.value

        //纺蛆,把列添加到行中
        var trObj = document.createElement('tr')

        trObj.appendChild(td1)
        trObj.appendChild(td2)

        var tbd = document.getElementById('tbd')
        // 把行添加到 tbody
        tbd.appendChild(trObj)

    }

</script>
</body>
</html>

刪除節(jié)點(diǎn)

node.removeChild() 方法從 node節(jié)點(diǎn)中刪除一個(gè)子節(jié)點(diǎn)吐葵,返回刪除的節(jié)點(diǎn)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>刪除</button>
<ul>
    <li>熊大</li>
    <li>熊二</li>
    <li>光頭強(qiáng)</li></ul>
<script>
    var ul = document.querySelector('ul')
    var btn = document.querySelector('button')
    btn.onclick = function () {
       if (ul.children.length == 0){
            // alert('還刪吶')
           this.disabled = true;
       }else {
           ul.removeChild(ul.children[0])
       }
    }
</script>
</body>
</html>

刪除留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>發(fā)布</button>
<ul></ul>

<script>
    // 獲取元素
    var btn = document.querySelector('button')
    var text = document.querySelector('textarea')
    var ul = document.querySelector('ul')
    // 注冊(cè)事件
    btn.onclick =function () {
        // console.log( text.value)
        if (text.value == ''){
            alert('您啥也沒寫就發(fā)布桥氏?')
            return false;
        }else {
            var li = document.createElement('li')

            // li.innerHTML = text.value +  "<a href='#'>刪除</a>"
            // li.innerHTML = text.value +  "<a href='javascript:;'>刪除</a>"
            ul.insertBefore(li, ul.children[0])

            // 刪除元素
           var as =  document.querySelectorAll('a')
            for (var i = 0; i < as.length; i++) {
                console.log('dd');
                as[i].onclick = function () {
                    ul.removeChild(this.parentNode)
                }

            }
        }
    }
</script>
</body>
</html>

復(fù)制(克抡哿)節(jié)點(diǎn)

<ul>
    <li>11111 <a href="#">dad</a></li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul')
  // 只復(fù)制標(biāo)簽,不復(fù)制內(nèi)容和子節(jié)點(diǎn)
    var li1clone  = ul.children[0].cloneNode(false);
    ul.appendChild(li1clone)

</script>

表格動(dòng)態(tài)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

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

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<table cellspacing="0">
    <thead>
    <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成績(jī)</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>

    </tbody>

</table>

<script>
    // 1.先去準(zhǔn)備好學(xué)生的數(shù)據(jù)
    var datas = [{
        name: '魏瓔珞',
        subject: 'JavaScript',
        score: 100
    }, {
        name: '弘歷',
        subject: 'JavaScript',
        score: 98
    }, {
        name: '傅恒',
        subject: 'JavaScript',
        score: 99
    }, {
        name: '明玉',
        subject: 'JavaScript',
        score: 88
    }, {
        name: '大豬蹄子',
        subject: 'JavaScript',
        score: 0
    }];
    var tbody = document.querySelector('tbody')
    // 遍歷數(shù)據(jù)
    for (var i = 0; i < datas.length; i++) {
        // 創(chuàng)建tr
       var tr =  document.createElement('tr')
        tbody.appendChild(tr)
        for (var k in datas[i]){
            var td = document.createElement('td')
            // console.log(datas[i][k])
            td.innerHTML = datas[i][k]
            tr.appendChild(td)
        }
        // 添加刪除
        var td = document.createElement('td')
        td.innerHTML = ' <a href="#">刪除</a>'
        tr.appendChild(td)
    }

    // 刪除
    var as  = document.querySelectorAll('a')
    for (var i = 0; i <as.length ; i++) {
        as[i].onclick = function () {
            tbody.removeChild(this.parentNode.parentNode)
        }
    }

</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末识颊,一起剝皮案震驚了整個(gè)濱河市诚镰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌祥款,老刑警劉巖清笨,帶你破解...
    沈念sama閱讀 211,561評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異刃跛,居然都是意外死亡抠艾,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門桨昙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)检号,“玉大人腌歉,你說(shuō)我怎么就攤上這事∑肟粒” “怎么了翘盖?”我有些...
    開封第一講書人閱讀 157,162評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)凹蜂。 經(jīng)常有香客問(wèn)我馍驯,道長(zhǎng),這世上最難降的妖魔是什么玛痊? 我笑而不...
    開封第一講書人閱讀 56,470評(píng)論 1 283
  • 正文 為了忘掉前任汰瘫,我火速辦了婚禮,結(jié)果婚禮上擂煞,老公的妹妹穿的比我還像新娘混弥。我一直安慰自己,他們只是感情好对省,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評(píng)論 6 385
  • 文/花漫 我一把揭開白布剑逃。 她就那樣靜靜地躺著,像睡著了一般官辽。 火紅的嫁衣襯著肌膚如雪蛹磺。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,806評(píng)論 1 290
  • 那天同仆,我揣著相機(jī)與錄音萤捆,去河邊找鬼。 笑死俗批,一個(gè)胖子當(dāng)著我的面吹牛俗或,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播岁忘,決...
    沈念sama閱讀 38,951評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼辛慰,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了干像?” 一聲冷哼從身側(cè)響起帅腌,我...
    開封第一講書人閱讀 37,712評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎麻汰,沒想到半個(gè)月后速客,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡五鲫,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評(píng)論 2 327
  • 正文 我和宋清朗相戀三年溺职,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡浪耘,死狀恐怖乱灵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情七冲,我是刑警寧澤痛倚,帶...
    沈念sama閱讀 34,306評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站癞埠,受9級(jí)特大地震影響状原,放射性物質(zhì)發(fā)生泄漏聋呢。R本人自食惡果不足惜苗踪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望削锰。 院中可真熱鬧通铲,春花似錦、人聲如沸器贩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蛹稍。三九已至吧黄,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間唆姐,已是汗流浹背拗慨。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留奉芦,地道東北人赵抢。 一個(gè)月前我還...
    沈念sama閱讀 46,351評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像声功,于是被迫代替她去往敵國(guó)和親烦却。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評(píng)論 2 348