js的DOM

最新推荐文章于 2024-07-12 14:10:05 发布

最love酸奶

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量109

点赞数

分类专栏： javascript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_46065861/article/details/120005343

版权

本文详细介绍了JavaScript中的DOM操作，包括节点的类型、名称和值，节点的访问方式，元素节点的获取与操作，节点的克隆，属性节点的处理，以及文本节点的相关操作。此外，还提到了document对象的重要属性和方法。

摘要由CSDN通过智能技术生成

1.DOM

定义:属于window的子对象，是文档性对象模型

在DOM中，所有内容为节点，节点的集合叫节点树

document是最大节点

用处：通过js改变标签和样式

2.节点

整个文档叫做节点树

每一个标签是一个元素节点

每一个属性是一个属性节点

每一个文本时文本节点

每一个注释都是节点

整个html的document是一个文档节点

节点类型	节点类型	节点名	节点值
元素节点	1	标签名（大写）	null
属性节点	2	属性名	属性值
文本节点	3	#text	文本内容
文档节点	9	#document	null

3.节点的介绍

我们主要关注

nodeType 节点类型

nodeName 节点名称

nodeValue 节点值

attributes:获取所有属性，以数组的形式返回

ATTRIBUTE_NODE: 2  属性节点
DOCUMENT_NODE: 9 文档节点
ELEMENT_NODE: 1  元素(标签)节点
TEXT_NODE: 3  文本节点

<body>
    <h2 id="box" style="color: red;">我是一个节点</h2>
    <script type="text/javascript">
        console.log(Node.prototype)//里面的数字代表什么类型

        //元素节点
        var box=document.getElementById('box')
        console.log(box)//拿到整个节点
        console.log(box.NodeType)//1
        console.log(box.NodeName)//标签名(为大写的标签名字) H2
        console.log(box.NodeValue)//null (标签没有值)

        // 属性节点
        var box1=document.getElementById('box');
        console.log(box.attributes)//获取所有属性
        var id=box.attribute[0]
        console.log(id.nodeName)//id  属性名
        console.log(id.nodeType)//2
        console.log(id.nodeValue)//red  属性值

        // 文本节点
        var box2=document.getElementById('box');
        var text=box.firstChild;
        console.log(text.nodeName)//#text
        console.log(text.nodeType)//3
        console.log(text.nodeValue)//文本内容

        // 文档节点
        console.log(document.nodeName)//#document
        console.log(document.nodeType)//9
        console.log(document.nodeValue)//null
    </script>
</body>

4.节点的访问

firstChirld：查找第一个子节点
lastChirld:最后一个子节点
parentNode:查找父节点
nextSibling:查找下一个兄弟节点
previousSibling:查找上一个兄弟节点
chilldNodes:返回元素中所有的节点(用数组返回)
hasChildNodes:查看是否有子节点返回boolean值

<body>
    <ul id="box">
        <li>大足</li>
        <li>潼南</li>
        <li>湖南</li>
        <li>成都</li>
    </ul>
    <script type="text/javascript">
        var box=document.getElementById('box')

        //chilldNodes:返回元素中所有的节点(用数组返回)
        console.log(box.childNodesS)
        console.log(box.childNodesS.length)//9  因为有空格

        // IE低版本长度为4, 不计算空格， 其他的浏览器长度为9   空格为文本节点
        alert(box.childNodes.length)//9


        console.log(box.firstChild)//#text 就是空格

        // 找第一个标签li 
        // nextSibiling:查找下一个兄弟节点
        console.log(box.firstChild.nextSibling)//li

        // 兼容性解决办法
        // 1.先看第一个子节点
        // console.log(box.firstChild.nodeType)
        box.firstChild.nodeType==3 ? box.firstChild.nextSibling : box.firstChild

        // 获取最后一个子节点
        console.log(box.lastChild)//#text

        console.log(box.lastChild.previousSibling)

        // 兼容性
        // 先判断最后一个节点类型
        box.lastChild.nodeType==3 ? box.lastChild.preSibling : box.lastChild

        // 查找父节点
        console.log(box.parentNode)//body
        console.log(box.parentNode.parentNode)//html
        console.log(box.parentNode.parentNode.parentNode)//#document
    </script>
</body>

5.获取元素节点

除了id不能重复，其他的属性都可以重复

通过id获取每一个html的id不能重复,返回获取的对象
通过class名获取标签,class名可以重复,以数组方式返回
通过name获取,以数组的方式返回(用的少)
通过标签名获取以数组方式返回

<body>
    <div>
        <p id="one">潼南</p>
        <p class="two">大足</p>
        <p name="three">成都</p>
        <p>永川</p>
        <p>四川</p>
    </div>
    <script type="text/javascript">

        // 通过id获取  每一个html的id不能重复,返回获取的对象
        var one=d

最低0.47元/天解锁文章

最love酸奶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js的DOM

1.DOM定义:属于window的子对象，是文档性对象模型在DOM中，所有内容为节点，节点的集合叫节点树document是最大节点用处：通过js改变标签和样式2.节点整个文档叫做节点树每一个标签是一个元素节点每一个属性是一个属性节点每一个文本时文本节点每一个注释都是节点整个html的document是一个文档节点节点类型节点类型节点名节点值元素节点1标签名（大写）null属性节点2属性名属性值文本节点3#text文本内容文档
复制链接

扫一扫