【JAVA-S2阶段】JavaScript的DOM和BOM

淡淡的烟草味﹌ 2022-05-13 11:00 314阅读 0赞

# window #

![这里写图片描述][70]  
window是bom的核心

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

### 在window对象中有常见的方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>prompt（）</td> 
   <td align="center">显示提示用户输入的对话款，在括号中放入两个参数，第一个参数是给用户的提示信息（string），第二个参数是用户输入（string）</td> 
  </tr> 
  <tr> 
   <td>alert（）</td> 
   <td align="center">警示窗口，可用于提示，相当于java中的system.out.println</td> 
  </tr> 
  <tr> 
   <td>confirm（）</td> 
   <td align="center">显示一个带有提示的窗口，与用户进行交互，可以配合if..else，按确定的时候放回true，否则false</td> 
  </tr> 
  <tr> 
   <td>close（）</td> 
   <td align="center">关闭窗口</td> 
  </tr> 
  <tr> 
   <td>open（）</td> 
   <td align="center">在括号中放入浏览器url。可以配合setinterval（）每个多少毫秒打开另外一个网页，模拟病毒</td> 
  </tr> 
  <tr> 
   <td>settimeout（）</td> 
   <td align="center">只执行一次，在制定多少毫秒之后，执行括号里第一个参数的函数或者是表达式</td> 
  </tr> 
  <tr> 
   <td>setinterval（）</td> 
   <td align="center">与settimeout()进行区别，主要在执行多次，根据每个多少毫秒执行一次函数或者是表达式</td> 
  </tr> 
 </tbody> 
</table>

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

### window的属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>history</td> 
   <td align="center">history.back()后退 history.forword()前进 / history.go(-1)相当于后退， history.go(1)相当于前进</td> 
  </tr> 
  <tr> 
   <td>location</td> 
   <td align="center">lacation.herf 改变浏览器的url/location.reload()相当于网页的F5，刷新页面</td> 
  </tr> 
 </tbody> 
</table>

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

### JavaScript的内置对象 ###

<table> 
 <thead> 
  <tr> 
   <th>对象</th> 
   <th align="center">用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Date对象</td> 
   <td align="center">主要用于处理时间类，例如 var 变量名=new Date()获取系统当前时间</td> 
  </tr> 
 </tbody> 
</table>

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

#### Date对象的相关用法 ####

![这里写图片描述][70 1]

<table> 
 <thead> 
  <tr> 
   <th>对象</th> 
   <th align="center">用法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Math对象</td> 
   <td align="center">主要用于处理数据 例如 Math.random（）获取随机数，与java中的Math处理数据类似</td> 
  </tr> 
 </tbody> 
</table>

![这里写图片描述][70 2]

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

## BOM ##

BOM:browser object model(浏览器对象模型)  
BOM提供了独立于内容的、可以与浏览器窗口进行交互的对象结构。

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

#### BOM主要对history和location进行操作 ####

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

## DOM ##

DOM：document object model 文档对象模型  
在文档对象模型中分为三种：core-DOM、HTML-DOM、CSS-DOM  
![这里写图片描述][70 3]

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

#### core-DOM核心DOM中的获取节点对象 ####

使用document对象调用getElementById(“id的值”) 在大部分时候建议使用这个方法。  
也可以使用document对象调用getElementsByName()主要更具标签中的name属性的值放回具有name属性值相同的集合  
也可以使用document对象调用getElementsByTagName(）根据标签名字放回标签相同的集合

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

#### core-DOM核心DOM中的层次方式访问节点 ####

![这里写图片描述][70 4]  
或者由于浏览器兼容性问题可以使用

![这里写图片描述][70 5]

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

#### core-DOM核心DOM中的节点类型 ####

<table> 
 <thead> 
  <tr> 
   <th>节点类型</th> 
   <th align="center">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>noneType</td> 
   <td align="center">返回节点类型 1=元素 2=属性 3=文本</td> 
  </tr> 
  <tr> 
   <td>noneValue</td> 
   <td align="center">返回节点中的值</td> 
  </tr> 
  <tr> 
   <td>noneName</td> 
   <td align="center">节点的名称 ul标签返回ul</td> 
  </tr> 
 </tbody> 
</table>

实例：  
![这里写图片描述][70 6]

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

#### HTML-DOM核心DOM中的CRUD操作 ####

HTML-DOM属性的读写  
节点.setAttribute(“name”，“jjjj”) 属性+值  
节点.getAttribute(“value”) 获取括号中属性对应的值

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

创建并添加节点  
创建节点 document.createElement(tagName)  
添加节点  
父节点.appendChild(新子节点)  
旧节点.parentNode.insertBefore(新节点, 旧节点)  
添加节点都是由父亲去调用

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

## CSS-DOM ##

style属性 CSS属性名去-，改-后的第一个字母为大写  
className属性  
也可以通过HTML-DOM的属性操作来改变样式  
obj.setAttribute(“style”, “font-size:12px;color:red;”);  
obj.setAttribute(“class”, “RedBold clear”);

读取style属性时，浏览器兼容性解决方案：IE方案和标准方案

IE方案： obj.currentStyle.属性名  
标准方案： document.defaultView.getComputedStyle(obj,null).属性名

![这里写图片描述][70 7]

[70]: /images/20220513/3abc109ad49a4c9aa1bc227dd440e0f7.png
[70 1]: /images/20220513/57ac5b9060794ccdbff12d905647fd19.png
[70 2]: /images/20220513/467640543f954290aa22e332d3f2a347.png
[70 3]: /images/20220513/7cc92b9425dd442291ab6a5807c262f0.png
[70 4]: /images/20220513/d4516800fbb94d7f828bbad15f8eb433.png
[70 5]: /images/20220513/4a4cfddb34e24e56a7d3c6965dc383e5.png
[70 6]: /images/20220513/be7d84d77a7b47d891f5381242be515d.png
[70 7]: /images/20220513/dce6794f980b4a488b228d21eb350189.png