网站开发实践单页网站网址

上次说了节点属性，其实节点属性不是很常用，大多数情况下我们只想获取元素，我们可以:

Element属性

加了element的属性，只返回元素节点(标签)，不再包含文体换行等文体节点:

        firstElementChild        //返回节点的第一个子节点【元素】

        lastElementChild         //返回节点的最后一个子节点

        nextElementSibling       //下一个元素节点

        previousElementSibling   //上一个元素节点

例:

    <div class="box">

        <ul class="name">

            <li>刘备</li>

            <li>关羽</li>

            <li>张飞</li>

            <li>诸葛亮</li>

        </ul>

    </div>

    <script>

        //找到ul

        var ul_ =document.getElementsByClassName('name')[0];

        //找到刘备

        console.log(ul_.firstElementChild);

        //找到关羽

        console.log(ul_.firstElementChild.nextElementSibling);

        //找到诸葛亮

        console.log(ul_.lastElementChild);

        //找到张飞

        console.log(ul_.lastElementChild.previousElementSibling);

    </script>

        //获取诸葛亮这几个字,因为其不是元素所以用child，找到文字节点后用nodevalue取出里面的值

        console.log(ul_.lastElementChild.firstChild.nodeValue);

 如果是要替换里面的值:

        //把诸葛亮换成事后诸葛亮

        console.log(ul_.lastElementChild.innerHTML='事后诸葛亮');

        //innerText也行

        console.log(ul_.lastElementChild.innerText='事后诸葛亮');

        //获取ul类名name(获取属性节点的值)

        var val =ul_.getAttributeNode('class').value;

        console.log(val);

        //还可以拿到图片路径
        console.log(ul_.parentNode.nextElementSibling.getAttributeNode('src').value);

首先在div下放一张图

    <div class="box">

        <ul class="name">

            <li>刘备</li>

            <li>关羽</li>

            <li>张飞</li>

            <li>诸葛亮</li>

        </ul> 

    </div>

    < img src="./images/屏幕截图 2024-05-29 231135.png" id="pic">

         //获取属性节点

        var pic_ =document.getElementById('pic');      console.log(pic_.getAttributeNode('id').value);

节点信息

nodeName:获取节点的名称，比如获取节点是什么标签。

nodeValue:节点值，比如获取h1标签包裹的内容。

nodeType:节点类型，有不同的数值对应不同的节点类型。

节点类型与对应NodeType值

元素dement : 1

属性attr : 2

文本text : 3

注释comments : 8

文档document : 9

例:

    <div class="box">

        <ul>

            <li>刘备</li>

        </ul>

    </div>

    <script>

        var box =document.getElementsByClassName('box')[0];

        // console.log(box.firstElementChild);确认拿到ul

        console.log(box.firstElementChild.nodeName);

        //节点名称返回的是大写，可toLocaleLowerCase()转化成小写

        console.log(box.firstElementChild.nodeName.toLocaleLowerCase());

        //节点值 box.firstElementChild(ul).firstElementChild(li)

        var li =box.firstElementChild.firstElementChild;

        //第一个子节点中的文字

        console.log(li.firstChild.nodeValue);

        //元素对应值

        console.log(li.nodeType);

 最后做一个练习，获取一下书的价格:

就是类似于这么个页面，随便仿照写写就行，我们主要做的是练习节点的获取——全部选中时下面的也对应的内容也对应都选中，点击加减按钮时，里面的数字也对应进行±1，勾选的部分也会对应放进总计中。

这就是对获取节点，绑定事件的一个练习，不要写一半一看觉得这么麻烦，以后工作写真实的项目不会这么麻烦，后面学习vue一些框架，几乎不会对原始dom节点进行操作，我们练习也是为了明白一些最原始基本的方法，作为日后学习的底气与储备。