# DOM 学习笔记

最新推荐文章于 2022-10-24 18:41:47 发布

菜鸟Player

最新推荐文章于 2022-10-24 18:41:47 发布

阅读量142

点赞数 1

分类专栏：学习笔记 JavaScript 文章标签： dom javascript

本文链接：https://blog.csdn.net/qq_46800734/article/details/118147000

版权

学习笔记同时被 2 个专栏收录

14 篇文章 1 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

2021/06/23

DOM 学习

DOM概述
节点层次
- Node类型 P248
事件
文档的加载
获取元素节点

DOM概述

DOM，Document Object Model文档对象模型，是针对HTML和XML文档的一个API（应用程序编程接口）。
DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

注意， IE 中的所有 DOM 对象都是以 COM 对象的形式实现的。这意味着 IE 中的DOM 对象与原生 JavaScript 对象的行为或活动特点并不一致。本章将较多地谈及这些差异。

节点层次

DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。
节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。

<html>
    <head>
       <title>Sample Page</title>
    </head>
    <body>
       <p>Hello World!</p>
    </body>
</html>

可将其HTML文档化为一个层次结构
在 HTML 页面中，文档元素始终都是元素。在 XML 中，没有预定义的元素，因此任何元素都可能成为文档元素。
在这里插入图片描述

Node类型 P248

DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。这个 Node 接口在JavaScript 中是作为 Node 类型实现的。（除了IE）
Javascript所有节点类型都继承自Node类型→所有节点类型都共享着相同的基本属性和方法。
在这里插入图片描述

每个节点都有一个nodeType属性，用于表示节点的类型。
节点类型有在Node类型中定义的12个数值常量表示
Node.ELEMENT_NODE(1)；
Node.ATTRIBUTE_NODE(2)；
Node.TEXT_NODE(3)；
Node.CDATA_SECTION_NODE(4)；
Node.ENTITY_REFERENCE_NODE(5)；
Node.ENTITY_NODE(6)；
Node.PROCESSING_INSTRUCTION_NODE(7)；
Node.COMMENT_NODE(8)；
Node.DOCUMENT_NODE(9)；
Node.DOCUMENT_TYPE_NODE(10)；
Node.DOCUMENT_FRAGMENT_NODE(11)；
Node.NOTATION_NODE(12)；
在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>

        </title>
    </head>
    <body>
        <button id="btn">我是一个button </button>
        <script type="text/javascript">
        //console.log(document);//Object为Document
        //找对象、获取对象
        var btn=document.getElementById("btn");
        console.log(btn);//Object:button
        //修改按钮的文字
        btn.innerHTML+"I'm Button";
        </script>
    </body>
</html>

事件

JavaScript与HTML之间交互是通过事件发生的
绑定方式：
①直接在标签里绑定
②创建对象
对应事件绑定处理函数来相应事件

var btn = doucment.getElementById("btn");
btn.onlick=function{
            alert("");
};

文档的加载

浏览器加载自上向下加载
Javascript：

绑定一个onload事件：该事件响应函数在页面加载完成之外后。

window.onload=function(){
//响应函数
}

或外部js文件

获取元素节点

通过document对象调用

getElementById()
通过id属性，获取一个元素节点对象
getEleetsByTagName() //返回的是一个数组
通过标签名，获取一组节点对象
getEleetsByName()
通过name属性，获取一组元素节点对象

innerHTML可以获取元素内部的代码
<input>自结束标签不能用 innerHTML，直接读value的属性名，eg：element.value。但是class的不能element.class而elementclassName代替

菜鸟Player

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
# DOM 学习笔记

2021/06/23DOM概述DOM，Document Object Model文档对象模型，是针对HTML和XML文档的一个API（应用程序编程接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。注意， IE 中的所有 DOM 对象都是以 COM 对象的形式实现的。这意味着 IE 中的DOM 对象与原生 JavaScript 对象的行为或活动特点并不一致。本章将较多地谈及这些差异。节点层次DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构
复制链接

扫一扫