自学js第十二天:DOM概念和基础操作

最新推荐文章于 2023-08-24 22:15:24 发布

AKA俄语人Лев

最新推荐文章于 2023-08-24 22:15:24 发布

阅读量1k

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/weixin_47592060/article/details/116434779

版权

Web API总结1：dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对应的node节点类型对象 , 又因为DOM下的这些node所有对象都实现implements 了 Node 接口，拥有一些共同的属性和方法,node节点实例对象其实都是来自Node接口。这是 DOM 操作的基础。总结2：有两种获取标签对象的写法: (静态生成和动态生成)<!D

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

Web API

总结1：

dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对应的node节点类型对象 , 又因为DOM下的这些node所有对象都实现implements 了 Node 接口，拥有一些共同的属性和方法,node节点实例对象其实都是来自Node接口。这是 DOM 操作的基础。

总结2：

有两种获取标签对象的写法: (静态生成和动态生成)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            ul li{
    
                color: black;
            }
            ul li.active{
    
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="box">MJJ</div>
        <ul id="box2">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script type="text/javascript">
            // 1.通过id获取单个节点对象
            var box = document.getElementById('box');
            console.log(box);
            console.dir(box);
            // // 2.通过标签名来获取节点对象
            // var box2 = document.getElementsByTagName('div');
            // console.log(box2);
            // var lis = document.getElementsByTagName('li');
            // for(var i = 0; i < lis.length; i++){
    
            //     // lis[i].className = 'active';
            //     lis[i].onclick = function(){
    
            //         // this指向了绑定onclick的那个对象
            //         // 排他思想,把所有的标签全部初始化为空,再让当前点击的this标签对象赋予active为激活状态,这样active就不会一直在第一个而是点击到哪个就去哪里标签对象上
            //         for(var j = 0; j < lis.length; j++){
    
            //             lis[j].className = '';
            //         };
            //         this.className = 'active';
            //     }
            // }
            // // 3.通过类名获取
            // var lis2 = document.getElementsByClassName('active');
            // // console.log(lis2);
            // // var box = document.getElementById('box2');
            // // console.log(box.children);
        </script>
    </body>
</html>

一.API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())

二.前端领域 Web API 接口的概念

浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

MDN-Web API

阮一峰:https://wangdoc.com/javascript/dom/general.html

三.掌握常见的浏览器提供的API的调用方式

利用javascript调用DOM 或者 BOM 提供的API方法来实现:
通过js 操作页面上的标签和文档和浏览器的功能.

复习JavaScript的组成三件套:

在这里插入图片描述

1.ECMAScript - JavaScript的核心

定义了javascript的语法层面的规范:

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关.

2.BOM - 浏览器brower对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

3.DOM - 文档document对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

四.JavaScript DOM接口开发

1.DOM的概念:

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model） , DOM 是 W3C
（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准>。

1.DOM 实际是 JavaScript 操作网页的'API接口'，全称为“文档对象模型”（Document Object Model）。
2.DOM 实际作用:是操作网页,将网页转为一个个 JavaScript 节点对象，从而可以用js脚本进行各种操作（比如增删内容）。
3.DOM 实际组成:浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的node节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口即DOM。


4.DOM 总体来说只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。

在这里插入图片描述

官方学习地址:

w3c: https://www.w3.org/TR/ElementTraversal/

cssom: https://drafts.csswg.org/cssom/

2.DOM 它的作用:是操作网页,将网页转为一个个 JavaScript 节点node对象，从而可以用js脚本进行各种操作（比如增删内容）。

2.HTML DOM 模型被构造为对象的树：DOM树

<!DOCTYPE html>
<html>
<head>
  <title>My title</title>
</head>
<body>
  <a href="">My link</a>
  <h1>My header</h1>
</body>
</html>

在这里插入图片描述

3.DOM中的一些基础名词了解.

文档：一个html网页可以称为文档document
节点：网页中的所有内容都是node节点（标签、属性、文本、注释等）
元素：即网页中的标签.
属性：标签的属性

4.DOM API接口分类

DOM的学习主要围绕操作标签节点与用户事件交互两个方面 , 我们先看一下所有需要学习的DOM API分类

1.DOM的属性 节点名称 节点类型 节点
2.对元素对象的 增 删 改 查
3.对元素属性的 增 删 改 查
4.对元素位置的获取
5.键盘事件与鼠标事件  事件监听 事件方法 事件对象  [点击,滚动,移入,移出,输入,键入]

四. node节点 : (dom全部内容都是node节点对象)

1.节点(叶子) 和节点树(树根)的概念:

(1)node节点:网页中的所有内容都是node节点（标签、属性、文本、注释等）
DOM文档树 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点对象可以看作是文档树的一片叶子。


(2)node节点的类型对象有七种:
Document：整个文档树的顶层节点
DocumentType：doctype标签（比如<!DOCTYPE html>）
Element：网页的各种HTML标签（比如<body>、<a>等）
Attr：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
浏览器提供一个原生的节点对象Node，上面这七种节点都继承了Node，因此具有一些共同的属性和方法。


(3网页文档节点树(document) .
一个文档的所有节点，按照所在的层级，我们可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，又像一棵树。浏览器原生提供document节点，代表整个文档。


(4)html文档的第一层有两个节点，
1.第一个是文档类型节点（<!doctype html>标签 ），
2.第二个是 HTML 网页的顶层容器<html>标签。
html构成了树结构的根节点（root node），其他 HTML 标签节点都是它的下级节点。

3。除了root根节点，其他节点都有三种层级关系。
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
DOM 提供操作接口，用来获取这三种关系的节点。比如，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。

在这里插入图片描述

2.深入node节点各种常用类型:

因为DOM的作用就是会将网页的各种内容 , 全部转为下面一个一个node节点对象,去给JS操作.

1.Element元素节点类型: (最常用,其他不怎么用)

Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。Element有下面几条特性：
（1）nodeType为1
（2）nodeName为元素标签名，tagName也是返回标签名
（3）nodeValue为null
（4）parentNode可能是Document或Element
（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

2.Text节点类型

Text表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。Text有下面的特性：
（1）nodeType为3
（2）nodeName为#text
（3）nodeValue为文本内容
（4）parentNode是一个Element
（5）没有子节点

3.Attr节点类型

Attr类型表示元素的特性，相当于元素的attributes属性中的节点，它有下面的特性：
（1）nodeType值为2
（2）nodeName是特性的名称
（3）nodeValue是属性的值
（4）parentNode为null

4.Comment注释节点类型

Comment表示HTML文档中的注释，它有下面的几种特征：
（1）nodeType为8
（2）nodeName为#comment
（3）nodeValue为注释的内容
（4）parentNode可能是Document或Element
（5）没有子节点

5.Document文档节点类型

Document表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性。Document有下面的特性：
（1）nodeType为9
（2）nodeName为#document
（3）nodeValue为null
（4）parentNode为null
（5）子节点可能是一个DocumentType或Element

6. DocumentType

DocumentType表示文档的DTD声明,用于确定文档版本,确定对应的API集与属性解析规则：
（1）nodeType为10
（2）nodeName为#document-fragment
（3）nodeValue为null
（4）parentNode为null

7.DocumentFragment类型

DocumentFragment是所有节点中唯一一个没有对应标记的类型，它表示一种轻量级的文档，可能当作一个临时的仓库用来保存可能会添加到文档中的节点。DocumentFragment有下面的特性：
（1）nodeType为11
（2）nodeName为#document-fragment
（3）nodeValue为null
（4）parentNode为null

五.Node接口: (node是节点对象统称 VS Node是接口)

1.Node接口概念:

所有 DOM 节点对象都 实现implements 了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。 

DOM1级定义了一个Node接口，该接口由DOM中所有节点类型组成实现。这个Node接口在JS中是作为Node引用类型对象实现的。在IE9以下版本无法访问到这个类型，JS中所有node节点都继承自Node类型，都共享着相同的基本属性和方法。

2. node节点下的每个类型对象都有一个.nodeType属性: 表示Node接口下的各种节点类型，它返回的是一个整数，其数值分别表示相应的Node类型. (即返回数字几,就可以去下图的Node常量表中找是什么类型)

具体如下：

//常用的得记住
Node.ELEMENT_NODE:1 //标签节点 *
Node.ATTRIBUTE_NODE:2 //属性节点 *
Node.TEXT_NODE:3 //文本节点 *
Node.COMMENT_NODE:8  //注释节点
Node.DOCUMENT_NODE:9  //最外层的根节点 Root element,包括所有其它节点 *
Node.DOCUMENT_FRAGMENT_NODE:11 //文档片段节点 


//没什么意义的:了解即可
Node.CDATA_SECTION_NODE:4 //子节点一定为TextNode
Node.ENTITY_REFERENCE_NODE:5
Node.ENTITY_NODE:6
Node.PROCESSING_INSTRUCTION_NODE:7 //命令节点
Node.DOCUMENT_TYPE_NODE:10  // DTD，不怎用的  现在都是h5的<!DOCTYPE………..>
Node.NOTATION_NODE:12 //DTD中的Nation定义 ,也用不上

3.深入为什么七种node节点对象会有nodetyoe这个属性?

因此Node接口也有:Node.prototype.nodeType,因为JS中所有node节点都实现了Node接口类型，因此都共享着相同的基本属性和方法.

2.Node 对象定义了几个常量，对应这些类型值,不同节点的nodeType属性值和对应的常量如下。

文档节点（document）：9，对应常量Node.DOCUMENT_NODE

元素节点（element）：1，对应常量Node.ELEMENT_NODE

属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE

文本节点（text）：3，对应常量Node.TEXT_NODE

文档片断节点（DocumentFragment）：11，对应常量Node.DOCUMENT_FRAGMENT_NODE

文档类型节点（DocumentType）：10，对应常量Node.DOCUMENT_TYPE_NODE

注释节点（Comment）：8，对应常量Node.COMMENT_NODE

确定节点类型时，使用nodeType属性是常用方法。
var node = document.documentElement.firstChild;
if (node.nodeType === Node.ELEMENT_NODE) {
  console.log('该节点是元素节点');
3.nodeType属性返回一个整数值，表示的是node节点对应的类型。
document.nodeType // 9
document.nodeType === Node.DOCUMENT_NODE // true
//上面代码中，文档节点的nodeType属性等于常量Node.DOCUMENT_NODE。

六.DOM API 寻找获取整个element标签节点对象:

1.通过以下方法通过document获取DOM中的整个element标签对象:(包含内部的全部子元素 )

2.这个方法是往下获取所有标签内的东西, 比如属性 , CSS样式 , 文本内容等的铺垫基础.

3.下面注意方法放的参数都是’ ‘字符串形式’,这是第一点:
①并且注意前面的是寻找HtmlCollection标签,因此方法参数是标签类名/标签名/id名  des/p/id

②而后者是寻找Nodelist节点.因此方法参数放的是css选择器的选择器名是带有可能带前缀的 .des/p/#id

//以前老三件套 ,集合返回的是HTMLCollection
1.var oHeader = document.getElementById('header');
//通过id名找标签元素 ,单数形式只获得一个
//PS:获取ID名称为 header 的标签 返回对应的节点对象(单个) 如果文档内有多个 ID名称为 header 的标签 只获取第一个

2.var aP = document.getElementsByTagName('p');
//通过标签的标签名找标签元素, 复数形式可以获得多个,单个使用下标即可.
//获取文档内的所有 p 标签 返回一个 DOM集合(HTMLCollection) 类数组对象 哪怕没有找到只有一个也返回类数组集合
//复合标签类似数组,有下标和长度, aP[0]:获得第一个p标签. 

3.var aDes = document.getElementsByClassName('des'); //IE9
//通过类名来寻找标签元素, 
//获取文档内的所有类名为 des 的标签 返回一个 DOM集合(NodeList) 类数组对象 哪怕没有找到只有一个也返回类数组集合



//h5新时代的方法 ,现在常用,  集合返回的是Nodelist
4.var oHeader = document.querySelector('#header');  
//querySelector是H5 新增的DOM API 参数使用合法的css选择器即可  返回复合条件的第一个元素 (唯一)

5.var aDes = document.querySelectorAll('.des');
//querySelectorAll是H5 新增的DOM API 参数使用合法的css选择器即可  返回复合条件的节点集合Nodelist 类数组对象(非唯一)

 /*	
  <div class="wrap">
    <p>你猜猜<span>我</span>是谁</p>
  </div>
 	
    
    */
    var oWrap = document.getElementById('wrap'); //获取类名为wrap下的父级div标签
	//两种方式获取div下的p
	//第一种,直接从document开始找所有的p,或者加下标
    var aP = document.getElementsByTagName('p'); //获取document文档中所有的p
 	var aP = document.getElementsByTagName('p')[0]; //获取document文档中的第一个p
	//第二种 ,可以通过前置节点对象调用查询方法来缩小查询范围
	//  #wrap p => oWrap.getElementsByTagName
    var oWrapP = oWrap.getElementsByTagName('p'); //获取父亲div标签下内部的所有儿子p



	//querySelector这类同上一个道理.
    var oWrap = document.querySelector('#wrap');
    var aP = document.querySelectorAll('p');
    var oWrapP = oWrap.querySelectorAll('p');

    console.log(aP); //获取document文档中所有的p
    console.log(oWrapP);  //获取oWrap标签内部的p


6. //都是网页唯一的可以直接获取
var body = document.body; //直接获取body节点对象
var head = document.head, //直接获取head节点对象
var title = document.title//直接获取title节点对象

3.代码案例:

<!--
 * @Author: your name
 * @Date: 2021-03-02 15:27:11
 * @LastEditTime: 2021-03-29 21:23:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \第十九天 页面练习d:\前端资料\js_20200713_224341\js第二十天 初见DOM\案例\case00.html
-->
<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM 获取节点</title>
</head>

<body>

  <h1 id="title">你好我是大标题</h1>
  <p>你好 我是p</p>


  <p class="des red">Lorem, ipsum dolor</p>
  <p class="des fz14">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aut iste,</p>


  <img src="images/bird.png" width="100" height="100" alt="bird">



  <script>
    //通过ID名称获取 getElementById
    var oTitle = document.getElementById('title'); 

    //getElementsByTagName 通过标签名称获取节点集合,返回的是一个集合
    var aP = document.getElementsByTagName('p');
    
    //getElementsByClassName 通过类名名称获取节点集合,支持单和多类名.
    //非标准方法 IE9+
    var aDes = document.getElementsByClassName('des red');
    console.log(oTitle);//只有单数
    console.log(aP); //复数,返回的是集合
    console.log(aP[0]); //单个,则返回具体的标签
    console.log(aDes);  //复数,返回的是集合
    console.log(aDes[0]);//单个,则返回具体的标签




    
    //H5新时代方法 H5 WEB API  iE8+
    //querySelector  是css合法选择器写法 会选中符合选择器条件的第一个标签节点.
    //querySelectorAll则是返回Nodelist集合
    var oTitle = document.querySelector('#title');  //id选择器
    var aDes = document.querySelector('.des'); //获取单个类名选择器,第一个标签节点  PS:伪元素不行
    var aDess = document.querySelectorAll('p.des'); //获取复数全部的类名选择器 PS:伪元素不行

    console.log(oTitle);
    console.log(aDes);
    console.log(aDess);
  </script>

</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DsNfR5aO-1620237082091)(C:\Users\tuyue\AppData\Local\Temp\1617024284320.png)]

4.dom的命名规范:

首先先知道:

①获取单一节点对象返回的是一个具体的标签对象.

②获取多个符合节点对象则返回的是一个具体的集合对象(htmlCollection /Nodelist) ,有下标可遍历.


 获取的DOM元素命名:

 +前缀 o  only 获取单一节点对象 
 querySelector  
 getElementById
 
  +前缀 a  all  DOM节点集合 NodeList集合
 getElementsByClassName 通过类名     htmlCollection 
 getElementsByTagName   通过标签名   htmlCollection 
 querySelectorAll	   通过选择器名  Nodelist


//节点集合有下标可查询和遍历:
//两种方法:
nodelist.length //返回节点列表的节点数目。
nodelist.item(idx) //返回某个元素基于文档树的索引 同 nodelist[idx]

案例如下:

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签对象属性3</title>
  <style>

  </style>
</head>

<body>
  <div id="wrap">
    41234124
  </div>
  <ul id="list" title="">
    <li>1 gdfhfdhgd</li>
    <li>2 gdfhfdhgd</li>
    <li>3 gdfhfdhgd</li>
    <li id="active">4 gdfhfdhgd</li>
    <li>5 gdfhfdhgd</li>
  </ul>
  <script>


    var oWrap = document.querySelector('#wrap');
    var aLi = document.querySelectorAll('#list li');
    var oActive = document.querySelector('#active');
    console.log(aLi);

    //indexOf ,如何遍历获取到的节点集合,即多个标签. 这里用参数方法.
    function getElementIdx(elements, item) {
    
      for (var i = 0, len = elements.length; i < len; i++) {
    
        if (item === elements[i]) {
    
          return i;
        }
      }
    }
  console.log(getElementIdx(aLi, oActive));
    // console.log([].indexOf.call(aLi, oActive))   后面学到


  </script>
</body>

最低0.47元/天解锁文章

AKA俄语人Лев

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自学js第十二天:DOM概念和基础操作

Web API总结1：dom文档树的作用,就是把网页全部内容转为一个个js节点对象去操作 , 因此dom的文档树的内部组成就是有许多叶子node节点对象.分别有七种类型的叶子包含网页全部内容都有对应的node节点类型对象 , 又因为DOM下的这些node所有对象都实现implements 了 Node 接口，拥有一些共同的属性和方法,node节点实例对象其实都是来自Node接口。这是 DOM 操作的基础。总结2：有两种获取标签对象的写法: (静态生成和动态生成)<!D
复制链接

扫一扫