zoukankan      html  css  js  c++  java
  • JavaScript DOM2

    1、Window.history:window.open打开网页的方式必须是_self

    window.history.back()后退

    Window.history.forward()前进

    <body>
            <input type="button" value="打开窗口" onclick="Dk()"  />
            <input type="button" value="前进" onclick="Qian()" />
     </body>
        <script type="text/javascript">
    		function Dk()
    		{
    			window.open("Untitled-2.html","_self","width=300 height=300");	
    		}
    		
    		function Qian()
    		{
    			window.history.forward();	
    		}
    

    Window.history.go(n);n为正数就是前进几个页面,为负数就是后退几个页面。

    <body>
            <input type="button" value="打开窗口" onclick="Dk()"  />
            <input type="button" value="前进" onclick="Qian()" />
     </body>
        <script type="text/javascript">
    		function Dk()
    		{
    			window.open("Untitled-2.html","_self","width=300 height=300");	
    		}
    		
    		function Qian()
    		{
    			window.history.go(1);	
    		}
    

     2、window.document

    查找元素

    根据id查找    var  d1 = document.getElementById("d1");

    根据class查找  var d2 = document.getElementsByClassName("d2");找到的是数组

    .根据标签名找  var d3 = document.getElementsByTagName("div");找到的是数组

    表单元素  var d4 = document.getElementsByName("aa") 找到的是数组

    3、操作
            1.操作内容 var d1 = document.getElementById("d1");

             获取内容 

            alert(d1.innerText);
            alert(d1.innerHTML);
            修改内容
            d1.innerHTML = "<b>修改</b>";

        <body>
            <div id="d1" style="100px; height:100px;">你好</div>
        </body>
    	   <script type="text/javascript">
    		   var b=document.getElementById("d1")
    		   b.innerHTML="<b>修改</b>"
           </script> 
    

     


            d1.innerText = "修改";

        <body>
            <div id="d1" style="100px; height:100px;">你好</div>
        </body>
    	   <script type="text/javascript">
    		   var b=document.getElementById("d1")
    		   b.innerText="修改"
           </script>
       


           2.操作属性
            var d1 = document.getElementById("d1");
           获取属性
            alert(d1.getAttribute("width"));
            设置属性
            d1.setAttribute("width","200");
            移除属性
            d1.removeAttribute("width");

        <body>
            <input type="button" value="按钮" disabled="disabled" id="d1"/>
        </body>
    	   <script type="text/javascript">
    		   var b=document.getElementById("d1")
    		 
           </script> 
    

     

        <body>
            <input type="button" value="按钮" disabled="disabled" id="d1"/>
        </body>
    	   <script type="text/javascript">
    		   var b=document.getElementById("d1")
    		   b.removeAttribute("disabled")
           </script> 
    

     

            3.操作样式
            var d1 = document.getElementById("d1");
            获取样式(只能获取内联,内嵌和外部都不能获取)
            alert(d1.style.color);
           alert(d1.style.backgroundColor);
            修改样式
            d1.style.backgroundColor = "";

        <body>
            <div id="d1" style="100px; height:100px; background-color:#0F0">你好</div>
        </body>
    	   <script type="text/javascript">
    		   var b=document.getElementById("d1")
    		   b.innerHTML="<b>修改</b>"
    

     

        <body>
            <div id="d1" style="100px; height:100px; background-color:#0F0">你好</div>
        </body>
    	   <script type="text/javascript">
    		   var b=document.getElementById("d1")
    		   b.innerHTML="<b>修改</b>"
    		   b.style.width="200px"
           </script> 
    

     

  • 相关阅读:
    c# 6.0, 7.0, 8.0, 9.0 总结
    Angular 学习笔记 (Angular 12 get started)
    Asp.net core 学习笔记之 globalization & localization 复习篇
    Angular 学习笔记 (Typescript 版本更新)
    Google Analytics & Ads 学习笔记 2 (GA4 版本)
    Google Analytics & Ads 学习笔记 2 (gtag 版本)
    Email 关于 POP3 IMAP SMTP office365 Outlook Gmail G-Suit shared mailbox小小理解
    摹客预言:设计工具的免费时代来了!
    低保真原型vs高保真原型,哪一种更适合你的设计?
    Instagram的UX和UI的演变史
  • 原文地址:https://www.cnblogs.com/navyouth/p/7711694.html
Copyright © 2011-2022 走看看