首页 > 编程语言> 文章详细

JavaScript 7—DOM

2020-07-29 12:34:24 阅读：268 来源： 互联网

标签：btn DOM JavaScript HTML 文档文本节点属性

DOM全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲地操作web页面

Document（文档）- 整个的HTML网页文档
Object（对象）- 将网页中的每一个部分都转换为了一个对象
Model（模型）- 使用模型来表示对象之间的关系，这样方便我们获取对象

节点

节点Node ,是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。比如: html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点,但是实际上他们的具体类型是不同的。比如:标签我们称为元素节点属性称为属性节点、文本称为文本节点文档称为文档节点。节点的类型不同,属性和方法也都不尽相同。

常用节点分为四类

文档节点：整个HTML文档
元素节点：HTML文档中的HTML标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容

节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

Dom简介

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        /*
            浏览器已经为我们提供了 文档节点对象 这个对象是window属性
                可以在页面中直接使用，文档节点代表的是整个网页
        */
        console.log(document);//object HTMLDocument

        //获取到button对象
        var btn = document.getElementById("btn");
        console.log(btn);//object HTMLButtonElement

        //修改按钮的文字
        console.log(btn.innerHTML);//我是一个按钮
        btn.innerHTML = "I am Button.";
    </script>
</body>

</html>

标签：btn,DOM,JavaScript,HTML,文档,文本,节点,属性
来源： https://www.cnblogs.com/stu-jyj3621/p/13396395.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript 7—DOM

节点

常用节点分为四类

节点的属性

Dom简介