js中的history和location对象及节点

最新推荐文章于 2024-09-12 13:34:40 发布

翅膀君

最新推荐文章于 2024-09-12 13:34:40 发布

阅读量1.4k

点赞数 1

文章标签：函数博客 javascript 对象

本文链接：https://blog.csdn.net/lh2420124680/article/details/51987983

版权

本文介绍了如何使用JavaScript进行网页导航控制，包括前进、后退和刷新页面等操作。此外，还详细讲解了DOM节点的基本概念及如何通过JavaScript来创建、修改和删除节点，帮助读者更好地理解和操作网页元素。

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

1.history

   
   
    
    
     
     <a href="javascript:history.forward()">前进</a>//forward()
    
    
    
    
     
     <a href="javascript:history.back()">后退</a>//back()

2.location

   
   
    
    
     
     location.reload()//刷新
    
    
    
    
     
     location.href = "www.xxx.com"//跳转

3.节点

节点中每一个元素和属性都算一个节点

例如：<p>哈哈</p>其中有两个节点,分别是“p”标签和“哈哈”;因此才操作的过程中要注意操作的节点数.

   
   
    
    
     
     <div style="border: 1px solid darkcyan;">
    
    
    
    
     
     			<p>节点</p>
    
    
    
    
     
     			<input type="button" value="改变节点样式" onclick="changeNodes()" />
    
    
    
    
     
     			<input type="button" value="增加节点" onclick="addNoders()" />
    
    
    
    
     
     			<input type="button" value="删除节点" onclick="removeNodes()" />
    
    
    
    
     
     			<div id="parents">
    
    
    
    
     
     				<p>呵呵</p>
    
    
    
    
     
     				<p>哈哈</p>
    
    
    
    
     
     			</div>
    
    
    
    
     
     		</div>

    
    
     
     
      
      //改变节点
     
     
     
     
      
      			function changeNodes() {
     
     
     
     
      
      				var parents = document.getElementById("parents");
     
     
     
     
      
      				var nodes = parents.childNodes;
     
     
     
     
      
      				//alert(sonNodes.length);节点长度为5个
     
     
     
     
      
      				nodes[3].style.border = "1px solid red";
     
     
     
     
      
      			}
     
     
     
     
      
       
     
     
     
     
      
                  //增加节点
     
     
     
     
      
      			function addNoders() {
     
     
     
     
      
      				var parents = document.getElementById("parents");
     
     
     
     
      
      				var nodes = document.createElement("img");
     
     
     
     
      
      				nodes.src = "img/555.jpg";
     
     
     
     
      
      				nodes.style.border = "1px solid red";
     
     
     
     
      
      				parents.appendChild(nodes);
     
     
     
     
      
      			}
     
     
     
     
      
       
     
     
     
     
      
                  //删除节点
     
     
     
     
      
      			function removeNodes() {
     
     
     
     
      
      				var parents = document.getElementById("parents");
     
     
     
     
      
      				parents.removeChild(parents.lastChild);
     
     
     
     
      
      			}