13.DOM和节点

最新推荐文章于 2023-05-24 15:57:35 发布

Keeling1720

最新推荐文章于 2023-05-24 15:57:35 发布

阅读量210

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113480341

版权

JavaScript 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

文章目录

DOM
节点

DOM

DOM全称：Document Object Model（文档对象模型）

let person = {
	name : '张三',
	say : function(){
	}
}

在js中，对象分为三种：
（1）用户定义的对象
（2）内建对象Array Date Math
（3）宿主对象

通常，我们把DOM看成一棵家谱树。例如以下代码：

<body>
    <h1>你想学习什么编程语言?</h1>
    <p title="请选择您想学习的语言">本网页由JS写成,期待您对其进行学习</p>
    <ul id="classList">
        <li class="item">JavaScript</li>
        <li class="item">HTML5</li>
        <li class="item">SpringCloud</li>
    </ul>
</body>

这里的家谱树就是：
body的孩子是：h1，p，ul。
然后ul还有孩子是：li、li、li。

节点

节点类型：
1.元素节点（element node）
2.属性节点( attribute node)
3.文本节点( text node)

<p title="请选择您想学习的语言">本网页由JS写成,期待您对其进行学习</p>
对于上面的句子，
p是元素节点，
title是属性节点，
本网页由JS。。。。是文本节点

获取节点的方式

这里直接贴代码：

<!DOCTYPE html>
<html lang="UTC-8">
<head>
    <meta charset="UTF-8">
    <title>节点</title>
</head>
<body>
    <h1>你想学习什么编程语言?</h1>
    <p title="请选择您想学习的语言">本网页由JS写成,期待您对其进行学习</p>
    <ul id="classList">
        <li class="item">JavaScript</li>
        <li class="item">HTML5</li>
        <li class="item">SpringCloud</li>
    </ul>
    <!--
    节点类型：
    1.元素节点（element node）
    2.属性节点( attribute node)
    3.文本节点( text node)
    <p title="请选择您想学习的语言">本网页由JS写成,期待您对其进行学习</p>

    -->
    <script type="text/javascript">
        //1.document.getElementById()，传入一个id，例如classList
        let eleNode = document.getElementById('classList');
        console.log(eleNode);

        //2.document.getElementsByTagName(),传入标签的名，例如li
        let oList = document.getElementsByTagName('li');
        console.log(oList);
        //若想获取每一个li的内容可以用以下代码
        // for (let i = 0; i < oList.length; i++){
        //     console.log(oList[i]);
        // }

        //3.document.getElementsByClassName('item'),传入的是class属性的值
        let oItems = document.getElementsByClassName('item');
        console.log(oItems);
        //逐一获取值得方法跟方法二一样
        // for (let i = 0; i < oItems.length; i++){
        //     console.log(oItems[i]);
        // }
    </script>
</body>
</html>

显示：
在这里插入图片描述

获取节点的值

普通获取（getElementById、getElementsByClassName、getElementsByTagName）

<!DOCTYPE html>
<html lang="UTC-8">
<head>
    <meta charset="UTF-8">
    <title>节点</title>
    <script type="text/javascript">
        function printText(){
            //通过id获取对象，直接可以用value取值
            let inputContent = document.getElementById('inputContent');
            console.log(inputContent.value);
            //通过tagName获取到对象的列表，得先取数组才可以取值
            let inputCon = document.getElementsByTagName('input');
            console.log(inputCon[0].value);
            //通过class获取到对象的列表，得先取数组才可以取值
            let inputCls = document.getElementsByClassName('Hello');
            console.log(inputCls[0].value);
        }
    </script>
</head>
<body>
<h1>你想学习什么编程语言?</h1>
<p title="请选择您想学习的语言">本网页由JS写成,期待您对其进行学习</p>
<ul id="classList">
    <li class="item">JavaScript</li>
    <li class="item">HTML5</li>
    <li class="item">SpringCloud</li>
</ul>
<input type="text" onchange="printText()" id="inputContent" class="Hello">
<!--
节点类型：
1.元素节点（element node）
2.属性节点( attribute node)
3.文本节点( text node)
<p title="请选择您想学习的语言">本网页由JS写成,期待您对其进行学习</p>

-->
<script type="text/javascript">
    //1.document.getElementById()，传入一个id，例如classList
    // let eleNode = document.getElementById('classList');
    // console.log(eleNode);

    //2.document.getElementsByTagName(),传入标签的名，例如li
    let oList = document.getElementsByTagName('li');
    console.log(oList);
    //若想获取每一个li的内容可以用以下代码(li使用他的textContent变量）
    for (let i = 0; i < oList.length; i++){
        console.log(oList[i].textContent);
    }

    //3.document.getElementsByClassName('item'),传入的是class属性的值
    // let oItems = document.getElementsByClassName('item');
    // console.log(oItems);
    //逐一获取值得方法跟方法二一样
    // for (let i = 0; i < oItems.length; i++){
    //     console.log(oItems[i]);
    // }
</script>
</body>
</html>

显示
在这里插入图片描述

联立获取

<!DOCTYPE html>
<html lang="UTC-8">
<head>
    <meta charset="UTF-8">
    <title>节点</title>
    <script type="text/javascript">
        function getJsNode(){
            //因为按照TagName查询到的是数组，所以要取0，如果是按id查询的则不用
            let jsNode1 = document.getElementsByTagName('ul')[0].getElementsByClassName('js');
            console.log(jsNode1[0].innerHTML);
            //利用id先获取父元素的对象，然后再获取其中名为js类名的标签对象
            let jsNode2 = document.getElementById('classList').getElementsByClassName('js');
            console.log(jsNode2[0].innerHTML);
        }
    </script>
</head>
<body>
<h1>你想学习什么编程语言?</h1>
<p title="请选择您想学习的语言">本网页由JS写成,期待您对其进行学习</p>
<ul id="classList">
    <!--该标签有两个类名，item和js-->
    <li class="item js">JavaScript</li>
    <li class="item">HTML5</li>
    <li class="item">SpringCloud</li>
</ul>
<button onclick="getJsNode()">获取ul标签下的js</button>
</body>
</html>

显示：
在这里插入图片描述
两个JavaScript都是通过联立的方式获取得到，详细可以看上方代码。

Keeling1720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13.DOM和节点

文章目录DOM节点获取节点的方式DOMDOM全程：Document Object Model（文档对象模型）let person = { name : '张三', say : function(){ }}在js中，对象分为三种：（1）用户定义的对象（2）内建对象Array Date Math（3）宿主对象通常，我们把DOM看成一棵家谱树。例如以下代码：<body> <h1>你想学习什么编程语言?</h1> <p title
复制链接

扫一扫