您的位置: 首页  >  文章  >  JavaScript：BOM与DOM编程

JavaScript：BOM与DOM编程

分类: 文章 • 2022-10-08 18:54:15
  1. BOM编程

  浏览器对象模型（Browser Object Model），提供了独立于内容而与浏览器窗口进行交互的对象，由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window。

JavaScript：BOM与DOM编程

    1. Window对象

方法

描述

window.innerHeight

浏览器窗口的内部高度

window.innerWidth

浏览器窗口的内部宽度

window.open()

打开新窗口

window.close()

闭当前窗口

示例：

 <script type="text/javascript">

function open_win() {

window.open("demo1.html");

}

</script>

<body>

<input type=button value="Open Window" onclick="open_win()" />

</body>

    1. history对象

方法

描述

history.back()

与在浏览器点击后退按钮相同

history.forward()

与在浏览器中点击向前按钮向前相同

history.go(index)

-1：后退一页 0:刷新当前页1：前进一页

使用：<a href="javascript:history.forward()"></a>

JavaScript：BOM与DOM编程
              

    1. location对象

方法

描述

location.href

获取URL

location.href="URL"

跳转到指定页面

location.reload()

重新加载页面

location.hostname

返回 web 主机的域名

location.pathname

返回当前页面的路径和文件名

location.port

返回 web 主机的端口 （80 或 443）

location.protocol

返回所使用的 web 协议（http:// 或 https://）

 

  1. DOM编程

DOM 全称是 Document Object Model，也就是文档对象模型,DOM把整个页面规划成由节点层级构成的文档。

JavaScript：BOM与DOM编程

 

 

 

 

 

    1. DOM方法

getElementById()

返回带有指定 ID 的元素。

getElementsByTagName()

返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

getElementsByClassName()

返回包含带有指定类名的所有元素的节点列表。

appendChild()

把新的子节点添加到指定节点。

removeChild()

删除子节点。

replaceChild()

替换子节点。

insertBefore()

在指定的子节点前面插入新的子节点。

createAttribute()

创建属性节点。

createElement()

创建元素节点。

createTextNode()

创建文本节点。

getAttribute()

返回指定的属性值。

setAttribute()

把指定属性设置或修改为指定的值。
    1. DOM属性

parentNode     

获取当前元素的父节点对象

chlidren

获取当前元素所有子元素节点对象，只返回HTML节点

chilidNodes   

获取当前元素多有子节点，包括文本，HTML，属性节点

firstChild      

获取当前元素的第一个子节点对象

lastChild       

获取当前元素的最后一个子节点对象

nextSibling

获取当前元素的下一个同级元素 没有就返回null

previousSibling   

获取当前元素上一个同级元素 没有就返回null

innerHTML   

获取元素的所有文本，包括html代码

innerText     

获取当前元素及子代所有文本值，只是文本内容，不包括html代码

nodeType   

获取节点的类型, 1：元素节点，2：属性节点，3：文本节点

style.color

设置元素的样式时使用style

 

 

    1. 获取html对象
      1. 三种方式

  • 通过ID获取（getElementById） 返回单对象

  • 通过name属性（getElementsByName） 返回数组对象

  • 通过标签名（getElementsByTagName） 返回数组对象

 

 

    1. 示例

JavaScript：BOM与DOM编程

      1. 示例1：改变图片

 

     

JS代码：

    

<script type="text/javascript">

function change(){

var imgs=document.getElementsByTagName("img");

imgs[0].setAttribute("src","images/grape.jpg");

}

</script>

html代码：

<body style="text-align:center;">

<img src="images/fruit.jpg" alt="水果图片" id="fruit" />

<br />

<input name="btn" type="button" value="改变图片" onclick="change()" />

</body>

 

 

 

 

 

 

 

 

示例2：访问节点属性的值

JavaScript：BOM与DOM编程

JS代码：

<script type="text/javascript">

function hh(){

var hText=document.getElementById("fruit").getAttribute("src");

alert("图片的路径是："+hText)

}

function check(){

var favor=document.getElementsByName("enjoy");

var like="你喜欢的水果是：";

for(var i=0;i<favor.length;i++){

if(favor[i].checked==true){

like+="\n"+favor[i].getAttribute("value");

}

}

 alert(like);

}

function change(){

var imgs=document.getElementsByTagName("img");

imgs[0].setAttribute("src","images/grape.jpg");

}

</script>

html代码：

<body>

<img src="images/fruit.jpg" alt="水果图片" id="fruit" />

<h1 id="love">选择你喜欢的水果：</h1>

<input name="enjoy" type="checkbox" value="apple" />苹果

<input name="enjoy" type="checkbox" value="banana" />香蕉

<input name="enjoy" type="checkbox" value="grape" />葡萄

<input name="enjoy" type="checkbox" value="pear" />梨

<input name="enjoy" type="checkbox" value="watermelon" />西瓜

<br />

<input name="btn" type="button" value="显示图片路径" onclick="hh()" />

<br /><input name="btn" type="button" value="喜欢的水果" onclick="check()" />

<br /><input name="btn" type="button" value="改变图片" onclick="change()" />

</body>

 

      1. 示例3：二级级联下拉列表

JavaScript：BOM与DOM编程

<script>

var course = new Array();

course["初级阶段"] = ["java初级",'java高级'];

course["中级阶段"] = ["jsp",'servlet'];

course["高级阶段"] = ["hibernate",'struts'];

function init(){

var stage = document.getElementById("stage");

for(var i in course){

stage.add(new Option(i,i),null);

}

}

function change(){

var stageValue = document.getElementById("stage").value;

var courseSel = document.getElementById("course");

courseSel.options.length=0;

for(var i in course){

if(i==stageValue){

for(var j in course[i]){

courseSel.add(new Option(course[i][j],course[i][j]),null);

}

}

}

}

 

window.onload=init;

</script>

 

      1. 示例4：创建节点
      • createElement（）：创建节点  
      • appendChild（）：末尾追加方式插入节点
      • insertBefore（）：在指定节点前插入新节点
      • cloneNode（）：克隆节点

 

JavaScript：BOM与DOM编程

JS代码：

function newNode(){

var oldNode=document.getElementById("sixty1"); //访问插入节点的位置

var image=document.createElement("img");       //创建一个图片节点

image.setAttribute("src","images/newimg.jpg");  //设置图片路径

 

document.body.insertBefore(image,oldNode);      //插入图片到sixty1前面

}

function copyNode(){

var image=document.getElementById("sixty1"); //访问复制的节点

var copyImage=image.cloneNode(false);           //复制指定的节点

document.body.appendChild(copyImage);      //在页面最后增加节点

    

}

</script>

 

html代码：

<body>

<h2>喜欢的水果</h2>

<input id="b1" type="button" value="增加一幅图片" onclick="newNode()" />

<input id="b2" type="button" value="复制原图" onclick="copyNode()" /><br />

 <img src="images/sixty1.jpg" id="sixty1" alt="水果" />

<img src="images/sixty2.jpg" id="sixty2" alt="果篮" />

</body>

 

 

      1. 示例5：删除和替换节点
  • removeChild（）：删除节点  
  • replaceChild( ) ：替换节点 

 

 

JS代码：

<script type="text/javascript">

function delNode(){

var dNode=document.getElementById("sixty1"); //访问被删除的节点

document.body.removeChild(dNode);      //删除图片

}

function repNode(){

var oldimage=document.getElementById("sixty2"); //访问被替换的节点

var newimage=document.createElement("img");   //创建一个图片节点

newimage.setAttribute("src","images/repimg.jpg"); //设置图片路径

document.body.replaceChild(newimage,oldimage); //替换原来的图片

}

</script>

 

html代码：

<body>

<h2>喜欢的水果</h2>

<input id="b1" type="button" value="删除图片" onclick="delNode()" />

<input id="b2" type="button" value="替换图片" onclick="repNode()" /><br />

 <img src="images/sixty1.jpg" id="sixty1" alt="水果" />

<img src="images/sixty2.jpg" id="sixty2" alt="果篮" />

</body>

 

 

 

 

相关推荐