[JavaScript] 第七章对象

柔情只为你懂 2024-04-23 21:03 56阅读 0赞

> ?作者主页：青花锁 ?简介：Java领域优质创作者?、Java微服务架构公号作者?  
> ?简历模板、学习资料、面试题库、技术互助
> 
> ?文末获取联系方式 ?

![在这里插入图片描述][8e79f79251004be596a5f46b79e5197a.png]

## 系列专栏目录 ##

[\[Java项目实战\] 介绍Java组件安装、使用；手写框架等][Java_ _Java]

[\[Aws服务器实战\] Aws Linux服务器上操作nginx、git、JDK、Vue等][Aws_ Aws Linux_nginx_git_JDK_Vue]

[\[Java微服务实战\] Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作 ][Java_ Java _Spring Cloud Netflix_Spring Cloud Alibaba_Seata_gateway_shadingjdbc_]

[\[Java基础篇\] Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中 ][Java_ Java_HashMap_String_StringBuffer_JVM_]

[\[Springboot篇\] 从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档 ][Springboot_ _Springboot_RestFul_Swagger_]

[\[Spring MVC篇\] 从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回 ][Spring MVC_ _Spring MVC_RestFul_]

[\[华为云服务器实战\] 华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等 ][_Linux_nginx_git_JDK_Vue_Html_Springboot_Vue_]

[\[Java爬虫\] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等 ][Java_ _Java_Selenium_GoogleWebDriver _bing_]

[\[Vue实战\] 讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等 ][Vue_ _Vue3_axios_Element-ui_]

[\[Spring\] 讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等 ][Spring_ _Spring_Bean_IOC_AOP_jdbcTemplate_redis_]

--------------------

## 前言 ##

今天给大家带来JavaScript的对象知识讲解，包括对象的创建和使用、Number对象、String对象、Dom对象、Element对象、数组兑现个、Math对象等。

## 1、对象的创建和使用 ##

对象看作是一个属性的无序集合，每个属性都有一个名称和值（键/值对）

### 1.1、创建对象 ###

使用花括号\{ \}来创建对象，\{ \}中用来定义对象中的属性。属性是一个个键:值对的组合，其中键（属性名称）始终是字符串类型的，而值（属性值）则可以是任意类型。

var news={
        
      title:"深圳下暴雨",
      content:"暴雨，堵车",
      newsType:1,
      displayTitle: function(){
        
      	document.write(this.title);
      }
    }

### 1.2、访问对象属性 ###

console.log(news.content); 
    console.log(news["content"]);

要访问或获取属性的值，您可以使用对象名.属性名或者对象名\[“属性名”\]的形式

### 1.3、设置修改对象属性 ###

使用对象名.属性名或者对象名\[“属性名”\]的形式除了可以获取对象的属性值外，也可以用来设置或修改对象的属性值

news.title = "放晴了"; 
    console.log(news.title);

### 1.4、删除对象属性 ###

delete 语句来删除对象中的属性
    delete news.title; 
    console.log('******' + news.title);

### 1.5、调用对象的方法 ###

news.displayName();
    news["displayName"]();

## 2、Number对象 ##

Infinity无穷
    var i = 1/0;
    NaN 非数字
    使用 isNaN() 函数可以判断一个数是否为 NaN
    NaN 不等于（通过 ==、!=、===、!== 比较）其它任何值（包括另外一个 NaN 值）

### 2.1、Number属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number.MAX_VALUE</td> 
   <td>JavaScript 中所能表示的最大值</td> 
  </tr> 
  <tr> 
   <td>Number.MIN_VALUE</td> 
   <td>JavaScript 中所能表示的最小值</td> 
  </tr> 
  <tr> 
   <td>Number.NaN</td> 
   <td>非数字</td> 
  </tr> 
  <tr> 
   <td>Number.NEGATIVE_INFINITY</td> 
   <td>负无穷，在溢出时返回</td> 
  </tr> 
  <tr> 
   <td>Number.POSITIVE_INFINITY</td> 
   <td>正无穷，在溢出时返回</td> 
  </tr> 
  <tr> 
   <td>Number.EPSILON</td> 
   <td>表示 1 与 Number 所能表示的大于 1 的最小浮点数之间的差</td> 
  </tr> 
  <tr> 
   <td>Number.MIN_SAFE_INTEGER</td> 
   <td>最小安全整数，即 -9007199254740991</td> 
  </tr> 
  <tr> 
   <td>Number.MAX_SAFE_INTEGER</td> 
   <td>最大安全整数，即 9007199254740991</td> 
  </tr> 
 </tbody> 
</table>

### 2.2、Number方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Number.parseFloat()</td> 
   <td>将字符串转换成浮点数，和全局方法 parseFloat() 作用相同</td> 
  </tr> 
  <tr> 
   <td>Number.parseInt()</td> 
   <td>将字符串转换成整型数字，和全局方法 parseInt() 作用相同</td> 
  </tr> 
  <tr> 
   <td>Number.isFinite()</td> 
   <td>判断 Number 对象是否为有穷数</td> 
  </tr> 
  <tr> 
   <td>Number.isInteger()</td> 
   <td>判断 Number 对象是否为整数</td> 
  </tr> 
  <tr> 
   <td>Number.isNaN()</td> 
   <td>判断 Number 对象是否为 NaN 类型</td> 
  </tr> 
  <tr> 
   <td>Number.isSafeInteger()</td> 
   <td>判断 Number 对象是否为安全整数，即范围为 -(2⁵³ - 1)到 2⁵³ - 1 之间的整数</td> 
  </tr> 
  <tr> 
   <td>Number.toString()</td> 
   <td>把 Number 对象转换为字符串，使用指定的基数</td> 
  </tr> 
  <tr> 
   <td>Number.toLocaleString()</td> 
   <td>把 Number 对象转换为字符串，使用本地数字格式顺序</td> 
  </tr> 
  <tr> 
   <td>Number.valueOf()</td> 
   <td>返回一个 Number 对象的基本数字值</td> 
  </tr> 
 </tbody> 
</table>

## 3、String对象 ##

### 3.1、创建 String 对象的语法格式如下 ###

var val = new String(value);
    var val = String(value);
    var val = "str";

### 3.2、属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>constructor</td> 
   <td>获取创建此对象的 String() 函数的引用</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td>获取字符串的长度</td> 
  </tr> 
  <tr> 
   <td>prototype</td> 
   <td>通过该属性您可以向对象中添加属性和方法</td> 
  </tr> 
 </tbody> 
</table>

var str =new String('JavaScript');
    String.prototype.name =null;
    str.name ="Hello World!";

### 3.3、对象中的方法： ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>anchor()</td> 
   <td>创建一个 HTML 锚点，即生成一个标签，标签的 name 属性为 anchor() 方法中的参数</td> 
  </tr> 
  <tr> 
   <td>big()</td> 
   <td>用大号字体显示字符串</td> 
  </tr> 
  <tr> 
   <td>blink()</td> 
   <td>显示闪动的字符串</td> 
  </tr> 
  <tr> 
   <td>bold()</td> 
   <td>使用粗体显示字符串</td> 
  </tr> 
  <tr> 
   <td>charAt()</td> 
   <td>返回在指定位置的字符</td> 
  </tr> 
  <tr> 
   <td>charCodeAt()</td> 
   <td>返回指定字符的 Unicode 编码</td> 
  </tr> 
  <tr> 
   <td>concat()</td> 
   <td>拼接字符串</td> 
  </tr> 
  <tr> 
   <td>fixed()</td> 
   <td>以打字机文本显示字符串</td> 
  </tr> 
  <tr> 
   <td>fontcolor()</td> 
   <td>使用指定的颜色来显示字符串</td> 
  </tr> 
  <tr> 
   <td>fontsize()</td> 
   <td>使用指定的尺寸来显示字符串</td> 
  </tr> 
  <tr> 
   <td>fromCharCode()</td> 
   <td>将字符编码转换为一个字符串</td> 
  </tr> 
  <tr> 
   <td>indexOf()</td> 
   <td>检索字符串，获取给定字符串在字符串对象中首次出现的位置</td> 
  </tr> 
  <tr> 
   <td>italics()</td> 
   <td>使用斜体显示字符串</td> 
  </tr> 
  <tr> 
   <td>lastIndexOf()</td> 
   <td>获取给定字符串在字符串对象中最后出现的位置</td> 
  </tr> 
  <tr> 
   <td>link()</td> 
   <td>将字符串显示为链接</td> 
  </tr> 
  <tr> 
   <td>localeCompare()</td> 
   <td>返回一个数字，并使用该数字来表示字符串对象是大于、小于还是等于给定字符串</td> 
  </tr> 
  <tr> 
   <td>match()</td> 
   <td>根据正则表达式匹配字符串中的字符</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>替换与正则表达式匹配的子字符串</td> 
  </tr> 
  <tr> 
   <td>search()</td> 
   <td>获取与正则表达式相匹配字符串首次出现的位置</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>截取字符串的片断，并将其返回</td> 
  </tr> 
  <tr> 
   <td>small()</td> 
   <td>使用小字号来显示字符串</td> 
  </tr> 
  <tr> 
   <td>split()</td> 
   <td>根据给定字符将字符串分割为字符串数组</td> 
  </tr> 
  <tr> 
   <td>strike()</td> 
   <td>使用删除线来显示字符串</td> 
  </tr> 
  <tr> 
   <td>sub()</td> 
   <td>把字符串显示为下标</td> 
  </tr> 
  <tr> 
   <td>substr()</td> 
   <td>从指定索引位置截取指定长度的字符串</td> 
  </tr> 
  <tr> 
   <td>substring()</td> 
   <td>截取字符串中两个指定的索引之间的字符</td> 
  </tr> 
  <tr> 
   <td>sup()</td> 
   <td>把字符串显示为上标</td> 
  </tr> 
  <tr> 
   <td>toLocaleLowerCase()</td> 
   <td>把字符串转换为小写</td> 
  </tr> 
  <tr> 
   <td>toLocaleUpperCase()</td> 
   <td>把字符串转换为大写</td> 
  </tr> 
  <tr> 
   <td>toLowerCase()</td> 
   <td>把字符串转换为小写</td> 
  </tr> 
  <tr> 
   <td>toUpperCase()</td> 
   <td>把字符串转换为大写</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>返回字符串</td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td>返回某个字符串对象的原始值</td> 
  </tr> 
 </tbody> 
</table>

### 3.4、转义字符 ###

<table> 
 <thead> 
  <tr> 
   <th>代码</th> 
   <th>输出</th> 
   <th>代码</th> 
   <th>输出</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>’</td> 
   <td>单引号</td> 
   <td>\r</td> 
   <td>回车</td> 
  </tr> 
  <tr> 
   <td>"</td> 
   <td>双引号</td> 
   <td>\t</td> 
   <td>tab</td> 
  </tr> 
  <tr> 
   <td>\</td> 
   <td>反斜线本身</td> 
   <td>\b</td> 
   <td>空格</td> 
  </tr> 
  <tr> 
   <td>\n</td> 
   <td>换行</td> 
   <td>\f</td> 
   <td>换页</td> 
  </tr> 
 </tbody> 
</table>

## 4、dom对象 ##

文档对象模型（Document Object Model，简称 DOM）；当浏览器加载一个 HTML 文档时，会创建一个 Document 对象，Document 对象是 DOM 树中所有节点的根节点。

### 4.1、dom对象中的属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.activeElement</td> 
   <td>返回当前获取焦点的元素</td> 
  </tr> 
  <tr> 
   <td>document.anchors</td> 
   <td>返回对文档中所有 Anchor 对象的引用</td> 
  </tr> 
  <tr> 
   <td>document.applets</td> 
   <td>返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 元素</td> 
  </tr> 
  <tr> 
   <td>document.baseURI</td> 
   <td>返回文档的基础 URI</td> 
  </tr> 
  <tr> 
   <td>document.body</td> 
   <td>返回文档的 body 元素</td> 
  </tr> 
  <tr> 
   <td>document.cookie</td> 
   <td>设置或返回与当前文档有关的所有 cookie</td> 
  </tr> 
  <tr> 
   <td>document.doctype</td> 
   <td>返回与文档相关的文档类型声明 (DTD)</td> 
  </tr> 
  <tr> 
   <td>document.documentElement</td> 
   <td>返回文档的根节点</td> 
  </tr> 
  <tr> 
   <td>document.documentMode</td> 
   <td>返回浏览器渲染文档的模式</td> 
  </tr> 
  <tr> 
   <td>document.documentURI</td> 
   <td>设置或返回文档的位置</td> 
  </tr> 
  <tr> 
   <td>document.domain</td> 
   <td>返回当前文档的域名</td> 
  </tr> 
  <tr> 
   <td>document.domConfig</td> 
   <td>已废弃，返回 normalizeDocument() 被调用时所使用的配置</td> 
  </tr> 
  <tr> 
   <td>document.embeds</td> 
   <td>返回文档中所有嵌入内容（embed）的集合</td> 
  </tr> 
  <tr> 
   <td>document.forms</td> 
   <td>返回文档中所有 Form 对象的引用</td> 
  </tr> 
  <tr> 
   <td>document.images</td> 
   <td>返回文档中所有 Image 对象的引用</td> 
  </tr> 
  <tr> 
   <td>document.implementation</td> 
   <td>返回处理该文档的 DOMImplementation 对象</td> 
  </tr> 
  <tr> 
   <td>document.inputEncoding</td> 
   <td>返回文档的编码方式</td> 
  </tr> 
  <tr> 
   <td>document.lastModified</td> 
   <td>返回文档的最后修改日期</td> 
  </tr> 
  <tr> 
   <td>document.links</td> 
   <td>返回对文档中所有 Area 和 Link 对象的引用</td> 
  </tr> 
  <tr> 
   <td>document.readyState</td> 
   <td>返回文档状态（载入中）</td> 
  </tr> 
  <tr> 
   <td>document.referrer</td> 
   <td>返回载入当前文档的 URL</td> 
  </tr> 
  <tr> 
   <td>document.scripts</td> 
   <td>返回页面中所有脚本的集合</td> 
  </tr> 
  <tr> 
   <td>document.strictErrorChecking</td> 
   <td>设置或返回是否强制进行错误检查</td> 
  </tr> 
  <tr> 
   <td>document.title</td> 
   <td>返回当前文档的标题</td> 
  </tr> 
  <tr> 
   <td>document.URL</td> 
   <td>返回文档的完整 URL</td> 
  </tr> 
 </tbody> 
</table>

### 4.2、方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>document.addEventListener()</td> 
   <td>向文档中添加事件</td> 
  </tr> 
  <tr> 
   <td>document.adoptNode(node)</td> 
   <td>从另外一个文档返回 adapded 节点到当前文档</td> 
  </tr> 
  <tr> 
   <td>document.close()</td> 
   <td>关闭使用 document.open() 方法打开的输出流，并显示选定的数据</td> 
  </tr> 
  <tr> 
   <td>document.createAttribute()</td> 
   <td>为指定标签添加一个属性节点</td> 
  </tr> 
  <tr> 
   <td>document.createComment()</td> 
   <td>创建一个注释节点</td> 
  </tr> 
  <tr> 
   <td>document.createDocumentFragment()</td> 
   <td>创建空的 DocumentFragment 对象，并返回此对象</td> 
  </tr> 
  <tr> 
   <td>document.createElement()</td> 
   <td>创建一个元素节点</td> 
  </tr> 
  <tr> 
   <td>document.createTextNode()</td> 
   <td>创建一个文本节点</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByClassName()</td> 
   <td>返回文档中所有具有指定类名的元素集合</td> 
  </tr> 
  <tr> 
   <td>document.getElementById()</td> 
   <td>返回文档中具有指定 id 属性的元素</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByName()</td> 
   <td>返回具有指定 name 属性的对象集合</td> 
  </tr> 
  <tr> 
   <td>document.getElementsByTagName()</td> 
   <td>返回具有指定标签名的对象集合</td> 
  </tr> 
  <tr> 
   <td>document.importNode()</td> 
   <td>把一个节点从另一个文档复制到该文档以便应用</td> 
  </tr> 
  <tr> 
   <td>document.normalize()</td> 
   <td>删除空文本节点，并合并相邻的文本节点</td> 
  </tr> 
  <tr> 
   <td>document.normalizeDocument()</td> 
   <td>删除空文本节点，并合并相邻的节点</td> 
  </tr> 
  <tr> 
   <td>document.open()</td> 
   <td>打开一个流，以收集来自 document.write() 或 document.writeln() 方法的输出</td> 
  </tr> 
  <tr> 
   <td>document.querySelector()</td> 
   <td>返回文档中具有指定 CSS 选择器的第一个元素</td> 
  </tr> 
  <tr> 
   <td>document.querySelectorAll()</td> 
   <td>返回文档中具有指定 CSS 选择器的所有元素</td> 
  </tr> 
  <tr> 
   <td>document.removeEventListener()</td> 
   <td>移除文档中的事件句柄</td> 
  </tr> 
  <tr> 
   <td>document.renameNode()</td> 
   <td>重命名元素或者属性节点</td> 
  </tr> 
  <tr> 
   <td>document.write()</td> 
   <td>向文档中写入某些内容</td> 
  </tr> 
  <tr> 
   <td>document.writeln()</td> 
   <td>等同于 write() 方法，不同的是 writeln() 方法会在末尾输出一个换行符</td> 
  </tr> 
 </tbody> 
</table>

## 5、Element 对象 ##

Document 对象中提供的方法（例如 getElementsByTagName()、getElementById()、getElementsByClassName() 等）可以得到 Element 对象

### 5.1、属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element.accessKey</td> 
   <td>设置或返回一个访问单选按钮的快捷键</td> 
  </tr> 
  <tr> 
   <td>element.attributes</td> 
   <td>返回一个元素的属性数组</td> 
  </tr> 
  <tr> 
   <td>element.childNodes</td> 
   <td>返回元素的一个子节点的数组</td> 
  </tr> 
  <tr> 
   <td>element.children</td> 
   <td>返回元素中子元素的集合</td> 
  </tr> 
  <tr> 
   <td>element.classList</td> 
   <td>返回元素中类名组成的对象</td> 
  </tr> 
  <tr> 
   <td>element.className</td> 
   <td>设置或返回元素的 class 属性</td> 
  </tr> 
  <tr> 
   <td>element.clientHeight</td> 
   <td>返回内容的可视高度（不包括边框，边距或滚动条）</td> 
  </tr> 
  <tr> 
   <td>element.clientWidth</td> 
   <td>返回内容的可视宽度（不包括边框，边距或滚动条）</td> 
  </tr> 
  <tr> 
   <td>element.contentEditable</td> 
   <td>设置或返回元素的内容是否可编辑</td> 
  </tr> 
  <tr> 
   <td>element.dir</td> 
   <td>设置或返回一个元素中的文本方向</td> 
  </tr> 
  <tr> 
   <td>element.firstChild</td> 
   <td>返回元素中的第一个子元素</td> 
  </tr> 
  <tr> 
   <td>element.id</td> 
   <td>设置或者返回元素的 id</td> 
  </tr> 
  <tr> 
   <td>element.innerHTML</td> 
   <td>设置或者返回元素的内容</td> 
  </tr> 
  <tr> 
   <td>element.isContentEditable</td> 
   <td>返回元素内容是否可编辑，如果可编辑则返回 true，否则返回 false</td> 
  </tr> 
  <tr> 
   <td>element.lang</td> 
   <td>设置或者返回一个元素的语言</td> 
  </tr> 
  <tr> 
   <td>element.lastChild</td> 
   <td>返回元素的最后一个子元素</td> 
  </tr> 
  <tr> 
   <td>element.namespaceURI</td> 
   <td>返回命名空间的 URI</td> 
  </tr> 
  <tr> 
   <td>element.nextSibling</td> 
   <td>返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）</td> 
  </tr> 
  <tr> 
   <td>element.nextElementSibling</td> 
   <td>返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）</td> 
  </tr> 
  <tr> 
   <td>element.nodeName</td> 
   <td>返回元素名称（大写）</td> 
  </tr> 
  <tr> 
   <td>element.nodeType</td> 
   <td>返回元素的节点类型</td> 
  </tr> 
  <tr> 
   <td>element.nodeValue</td> 
   <td>返回元素的节点值</td> 
  </tr> 
  <tr> 
   <td>element.offsetHeight</td> 
   <td>返回元素的高度，包括边框和内边距，但不包括外边距</td> 
  </tr> 
  <tr> 
   <td>element.offsetWidth</td> 
   <td>返回元素的宽度，包括边框和内边距，但不包括外边距</td> 
  </tr> 
  <tr> 
   <td>element.offsetLeft</td> 
   <td>返回元素在水平方向的偏移量</td> 
  </tr> 
  <tr> 
   <td>element.offsetParent</td> 
   <td>返回距离该元素最近的进行过定位的父元素</td> 
  </tr> 
  <tr> 
   <td>element.offsetTop</td> 
   <td>返回元素在垂直方向的偏移量</td> 
  </tr> 
  <tr> 
   <td>element.ownerDocument</td> 
   <td>返回元素的根元素（文档对象）</td> 
  </tr> 
  <tr> 
   <td>element.parentNode</td> 
   <td>返回元素的父节点</td> 
  </tr> 
  <tr> 
   <td>element.previousSibling</td> 
   <td>返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）</td> 
  </tr> 
  <tr> 
   <td>element.previousElementSibling</td> 
   <td>返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）</td> 
  </tr> 
  <tr> 
   <td>element.scrollHeight</td> 
   <td>返回元素的完整高度（包括被滚动条隐蔽的部分）</td> 
  </tr> 
  <tr> 
   <td>element.scrollLeft</td> 
   <td>设置或返回元素滚动条距离元素左侧的距离</td> 
  </tr> 
  <tr> 
   <td>element.scrollTop</td> 
   <td>设置或返回元素滚动条距离元素上方的距离</td> 
  </tr> 
  <tr> 
   <td>element.scrollWidth</td> 
   <td>返回元素的完整宽度（包括被滚动条隐蔽的部分）</td> 
  </tr> 
  <tr> 
   <td>element.style</td> 
   <td>设置或返回元素的样式属性</td> 
  </tr> 
  <tr> 
   <td>element.tabIndex</td> 
   <td>设置或返回元素的标签顺序</td> 
  </tr> 
  <tr> 
   <td>element.tagName</td> 
   <td>以字符的形式返回元素的名称（大写）</td> 
  </tr> 
  <tr> 
   <td>element.textContent</td> 
   <td>设置或返回某个元素以及其中的文本内容</td> 
  </tr> 
  <tr> 
   <td>element.title</td> 
   <td>设置或返回元素的 title 属性</td> 
  </tr> 
  <tr> 
   <td>element.length</td> 
   <td>返回对象的长度</td> 
  </tr> 
 </tbody> 
</table>

### 5.2、方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element.addEventListener()</td> 
   <td>为指定元素定义事件</td> 
  </tr> 
  <tr> 
   <td>element.appendChild()</td> 
   <td>为元素添加一个新的子元素</td> 
  </tr> 
  <tr> 
   <td>element.cloneNode()</td> 
   <td>克隆某个元素</td> 
  </tr> 
  <tr> 
   <td>element.compareDocumentPosition()</td> 
   <td>比较当前元素与指定元素在文档中的位置，返回值如下：<br>● 1：表示两个元素没有关系，不属于同一文档；<br>● 2：表示当前元素在指定元素之后；<br>● 4：当前元素在指定元素之前；<br>● 8：当前元素在指定元素之内；<br>● 16：指定元素在当前元素之内；<br>● 32：两个元素没有关系，或者它们是同一元素的两个属性。</td> 
  </tr> 
  <tr> 
   <td>element.focus()</td> 
   <td>使元素获得焦点</td> 
  </tr> 
  <tr> 
   <td>element.getAttribute()</td> 
   <td>通过属性名称获取指定元素的属性值</td> 
  </tr> 
  <tr> 
   <td>element.getAttributeNode()</td> 
   <td>通过属性名称获取指定元素得属性节点</td> 
  </tr> 
  <tr> 
   <td>element.getElementsByTagName()</td> 
   <td>通过标签名获取当前元素下的所有子元素的集合</td> 
  </tr> 
  <tr> 
   <td>element.getElementsByClassName()</td> 
   <td>通过类名获取当前元素下的子元素的集合</td> 
  </tr> 
  <tr> 
   <td>element.hasAttribute()</td> 
   <td>判断元素是否具有指定的属性，若存在则返回 true，不存在则返回 false</td> 
  </tr> 
  <tr> 
   <td>element.hasAttributes()</td> 
   <td>判断元素是否存在任何属性，若存在则返回 true，不存在则返回 false</td> 
  </tr> 
  <tr> 
   <td>element.hasChildNodes()</td> 
   <td>判断一个元素是否具有子元素，有则返回 true，没有则返回 false</td> 
  </tr> 
  <tr> 
   <td>element.hasFocus()</td> 
   <td>判断元素是否获得了焦点</td> 
  </tr> 
  <tr> 
   <td>element.insertBefore()</td> 
   <td>在已有子元素之前插入一个新的子元素</td> 
  </tr> 
  <tr> 
   <td>element.isDefaultNamespace()</td> 
   <td>如果指定 namespaceURI 是默认的则返回 true，否则返回 false。</td> 
  </tr> 
  <tr> 
   <td>element.isEqualNode()</td> 
   <td>检查两个元素是否相等</td> 
  </tr> 
  <tr> 
   <td>element.isSameNode()</td> 
   <td>检查当前元素与指定元素是否为同一元素</td> 
  </tr> 
  <tr> 
   <td>element.isSupported()</td> 
   <td>判断当前元素是否支持某个特性</td> 
  </tr> 
  <tr> 
   <td>element.normalize()</td> 
   <td>合并相邻的文本节点，并删除空的文本节点</td> 
  </tr> 
  <tr> 
   <td>element.querySelector()</td> 
   <td>根据 CSS 选择器，返回第一个匹配的元素</td> 
  </tr> 
  <tr> 
   <td>document.querySelectorAll()</td> 
   <td>根据 CSS 选择器，返回所有匹配的元素</td> 
  </tr> 
  <tr> 
   <td>element.removeAttribute()</td> 
   <td>从元素中删除指定的属性</td> 
  </tr> 
  <tr> 
   <td>element.removeAttributeNode()</td> 
   <td>从元素中删除指定的属性节点</td> 
  </tr> 
  <tr> 
   <td>element.removeChild()</td> 
   <td>删除一个子元素</td> 
  </tr> 
  <tr> 
   <td>element.removeEventListener()</td> 
   <td>移除由 addEventListener() 方法添加的事件</td> 
  </tr> 
  <tr> 
   <td>element.replaceChild()</td> 
   <td>替换一个子元素</td> 
  </tr> 
  <tr> 
   <td>element.setAttribute()</td> 
   <td>设置或者修改指定属性的值</td> 
  </tr> 
  <tr> 
   <td>element.setAttributeNode()</td> 
   <td>设置或者修改指定的属性节点</td> 
  </tr> 
  <tr> 
   <td>element.setUserData()</td> 
   <td>在元素中为指定键值关联对象</td> 
  </tr> 
  <tr> 
   <td>element.toString()</td> 
   <td>将元素转换成字符串</td> 
  </tr> 
  <tr> 
   <td>nodelist.item()</td> 
   <td>返回某个元素基于文档树的索引</td> 
  </tr> 
 </tbody> 
</table>

## 6、数组对象 ##

JavaScript的数组（Array）是一种内置的数据结构，用于在单个变量中存储多个值。它是一个容器，可以存储任意数据类型的元素，例如数字、字符串、对象，甚至其他数组。JavaScript的数组是从0开始索引的，这意味着第一个元素的索引为0，第二个元素的索引为1，依此类推。  
以下是如何在JavaScript中声明和初始化数组的示例：

// 空数组
    var emptyArray = [];
    
    // 包含值的数组
    var fruits = ['apple', 'banana', 'orange'];
    
    // 不同数据类型的数组
    var mixedArray = [42, 'Hello', true, {
         name: 'John' }];
    
    // 嵌套数组
    var nestedArray = [[1, 2], [3, 4, 5], [6]];
    
    // 访问元素
    console.log(fruits[0]); // 输出：'apple'
    console.log(mixedArray[2]); // 输出：true
    
    // 修改元素
    fruits[1] = 'grape'; // 将第二个元素修改为'grape'
    
    // 数组长度
    console.log(fruits.length); // 输出：3
    
    // 在末尾添加元素
    fruits.push('pear'); // 在数组末尾添加'pear'
    
    // 从末尾删除元素
    var lastElement = fruits.pop(); // 删除并返回最后一个元素（'pear'）
    
    // 遍历元素
    for (var i = 0; i < fruits.length; i++) {
        
      console.log(fruits[i]);
    }

## 7、Math对象 ##

JavaScript Math 数学函数及其分类

### 7.1、三角函数 ###

*  Math.sin(x)：正弦函数，返回 x 的正弦值。
 *  Math.cos(x)：余弦函数，返回 x 的余弦值。
 *  Math.tan(x)：正切函数，返回 x 的正切值。  
    示例用法：

let x = Math.PI / 4;
    
    console.log(Math.sin(x));  // 输出：0.7071067811865475
    console.log(Math.cos(x));  // 输出：0.7071067811865476
    console.log(Math.tan(x));  // 输出：0.9999999999999999

### 7.2、对数和指数函数 ###

*  Math.log(x)：自然对数函数，返回 x 的自然对数。
 *  Math.exp(x)：指数函数，返回 e 的 x 次幂。  
    示例用法：

let x = 2;
    
    console.log(Math.log(x));  // 输出：0.6931471805599453
    console.log(Math.exp(x));  // 输出：7.3890560989306495

### 7.3、舍入函数 ###

*  Math.round(x)：四舍五入函数，将 x 四舍五入为最接近的整数。
 *  Math.ceil(x)：向上取整函数，返回大于或等于 x 的最小整数。
 *  Math.floor(x)：向下取整函数，返回小于或等于 x 的最大整数。  
    示例用法：

let x = 3.7;
    
    console.log(Math.round(x));   // 输出：4
    console.log(Math.ceil(x));    // 输出：4
    console.log(Math.floor(x));   // 输出：3

### 7.4、平方根和指数运算 ###

*  Math.sqrt(x)：平方根函数，返回 x 的平方根。
 *  Math.pow(x, y)：幂函数，返回 x 的 y 次幂。  
    示例用法：

let x = 16;
    let y = 3;
    
    console.log(Math.sqrt(x));    // 输出：4
    console.log(Math.pow(x, y));  // 输出：4096

### 7.5、常量 ###

*  Math.PI：圆周率 π，约为 3.14159。  
    0 Math.E：自然常数 e，约为 2.71828。  
    示例用法：

console.log(Math.PI);  // 输出：3.141592653589793
    console.log(Math.E);   // 输出：2.718281828459045

--------------------

### 联系方式 ###

#### 微信公众号：Java微服务架构 ####

![在这里插入图片描述][c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]

[8e79f79251004be596a5f46b79e5197a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/f3f515b77ff642c3b73b3b3944aa16e0.png
[Java_ _Java]: https://blog.csdn.net/s445320/category_12345409.html
[Aws_ Aws Linux_nginx_git_JDK_Vue]: https://blog.csdn.net/s445320/category_12492968.html
[Java_ Java _Spring Cloud Netflix_Spring Cloud Alibaba_Seata_gateway_shadingjdbc_]: https://blog.csdn.net/s445320/category_12439818.html
[Java_ Java_HashMap_String_StringBuffer_JVM_]: https://blog.csdn.net/s445320/category_12369312.html
[Springboot_ _Springboot_RestFul_Swagger_]: https://blog.csdn.net/s445320/category_12273537.html
[Spring MVC_ _Spring MVC_RestFul_]: https://blog.csdn.net/s445320/category_12295009.html
[_Linux_nginx_git_JDK_Vue_Html_Springboot_Vue_]: https://blog.csdn.net/s445320/category_12426609.html
[Java_ _Java_Selenium_GoogleWebDriver _bing_]: https://blog.csdn.net/s445320/category_8863085.html
[Vue_ _Vue3_axios_Element-ui_]: https://blog.csdn.net/s445320/category_12278346.html
[Spring_ _Spring_Bean_IOC_AOP_jdbcTemplate_redis_]: https://blog.csdn.net/s445320/category_12283629.html
[c8bfb5ed6bbf47f386f48923b2b123ef.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/23/3b9ecf1ab1074f2a93f49c7c7c64a4ad.jpeg