JavaScript（四）——DOM操作——Window.document對象

来源:http://www.cnblogs.com/H2921306656/archive/2016/07/13/5668299.html
-Advertisement-
Play Games

一、找到元素： docunment.getElementById("id")；根據id找，最多找一個； var a =docunment.getElementById("id");將找到的元素放在變數中； docunment.getElementsByName("name")；根據name找，找出來 ...


一、找到元素：


    docunment.getElementById("id")；根據id找，最多找一個；
    var a =docunment.getElementById("id");將找到的元素放在變數中；
    docunment.getElementsByName("name")；根據name找，找出來的是數組；
    docunment.getElementsByTagName("name")；根據標簽名找，找出來的是數組；
    docunment.getElementsByClassName("name") 根據classname找，找出來的是數組；

 

二、操作內容：

 1. 非表單元素：

（1）獲取內容：

alert(a.innerHTML);標簽里的html代碼和文字都獲取了，標簽裡面的所有內容。

如：body中有這麼一個div：

<div id="me"><b>試試吧</b></div>

在script中用innerHTML獲取div中的內容：

    var a= document.getElementById("me");

    alert(a.innerHTML);

結果如下圖：

    alert(a.innerText);只取裡面的文字
    alert(a.outerHTML);包括標簽本身的內容（簡單瞭解）

（2）設置內容：

a.innerHTML = "<font color=red >hello world </font>";

如果用設置內容代碼結果如下，div中的內容被替換了：

a.innerText會將賦的東西原樣呈現

清空內容：賦值個空字元串

2. 表單元素：

（1）獲取內容，有兩種獲取方式：

    var t = document.f1.t1; form表單ID為f1裡面的ID為t1的input；
    var t = document.getElementById("id"); 直接用ID獲取。

    alert(t.value); 獲取input中的value值；
    alert(t.innerHTML); 獲取<textarea> 這裡的值 </textarea>；

（2）設置內容： t.value="內容改變"；

3. 一個小知識點：

    <a href="http://www.baidu.com" onclick ="return false">轉向百度</a> ；加了return flase則不會跳轉，預設是return true會跳轉。按鈕也一樣，如果按鈕中設置return flase 則不會進行提交，利用這個可以對提交跳轉進行控制。

三、操作屬性

首先利用元素的ID找到該元素，存於一個變數中：

var a = document.getElementById("id");

然後可以對該元素的屬性進行操作：

a.setAttribute("屬性名","屬性值"); 設置一個屬性，添加或更改都可以；

a.getAttribute("屬性名")；獲取屬性的值；

a.removeAttribute("屬性名")；移除一個屬性。

例子1：做一個問題，如果輸入的答案正確則彈出正確，錯誤彈出錯誤；

這裡在text裡面寫了一個daan屬性，裡面存了答案的值，點擊檢查答案的時候cheak輸入的內容和答案是否一樣：

Body中代碼：

<form>中華民國成立於哪一年？<input type="text" daan="1912年" value="" id="t1" name="t1" /><input type="button" onclick="check()" id="t2" name="t2" value="檢查答案" /></form>
View Code

JS中的代碼：

function check() 
{     
    var a=document.getElementById("t1");     
    var a1=a.value;     
    var a2=a.getAttribute("daan");    
    if(a1==a2)    
    {         
        alert("恭喜你答對了！");     
    }     
   else     
   {         
       alert("笨蛋！");     
   } 
}
View Code

回答正確時的結果：

       例子2： 同意按鈕，倒計時10秒，同意按鈕變為可提交的，這裡用了操作屬性：disabled，來改變按鈕的狀態，當disabled=”disabled”時按鈕不可用。

body中的代碼：

<form><input type="submit" id="b1" name="b1" value="同意（10）" disabled="disabled" /></form>

JS中的代碼：

var n=10;
var a= document.getElementById("b1");
function bian() 
{     
      n--;     
      if(n==0)    
      {         
            a.removeAttribute("disabled");         
            a.value="同意";        
            return;     
      }     
      else     
      {         
            a.value= "同意（"+n+"）";         
            window.setTimeout("bian()",1000);     
      } 
} 
window.setTimeout("bian()",1000);
View Code

運行的結果：

四、操作樣式

首先利用元素的ID找到該元素，存於一個變數中：

var a = document.getElementById("id")；

然後可以對該元素的屬性進行操作：

a.style="" ； 操作此ID樣式的屬性。

樣式為CSS中的樣式，所有的樣式都可以用代碼進行操作。

document.body.style.backgroundColor="顏色"； 整個視窗的背景色。

操作樣式的class：a.className="樣式表中的classname" 操作一批樣式

例子1：展示圖片的自動和手動切換；

Body中的代碼，做一個有背景圖片的div和兩側的控制對象：

<div id="tuijian" style=" background-image:url(imges/tj1.jpg);">             <div class="pages" id="p1" onclick="dodo(-1)"></div>             
<div class="pages" id="p2" onclick="dodo(1)"></div></div>

樣式表中的代碼：

<style type="text/css"> 
*{     
      margin:0px auto;     
      padding:0px;    
      font-family:"微軟雅黑"; } 
#tuijian
{     
      width:760px;     
      height:350px;     
      background-repeat:no-repeat; } 
.pages
{     
      top:200px;     
      background-color:#000;     
      background-position:center;     
      background-repeat:no-repeat;     
      opacity: 0.4;     
      width: 30px;     
      height:60px; } 
#p1
{     
      background-image:url(imges/prev.png);     
      float:left;     
      margin:150px 0px 0px 10px; } 
#p2
{     
      background-image:url(imges/next.png);     
      float:right;    
      margin:150px 10px 0px 0px; } 
</style>
View Code

JS中的代碼，這裡主要是每隔3秒中調用一下huan（）函數，來將背景圖片的樣式修改，在點擊左右切換的時候變為手動切換，自動切換停止：

<script language="javascript">
var jpg =new Array(); 
jpg[0]="url(imges/tj1.jpg)";
jpg[1]="url(imges/tj2.jpg)"; 
jpg[2]="url(imges/tj3.jpg)";
var tjimg = document.getElementById("tuijian");
var xb=0;
var n=0;
function huan() 
{     
      xb++;     
      if(xb == jpg.length)     
      {         
           xb=0;     
      }         
      tjimg.style.backgroundImage=jpg[xb];    
      if(n==0)     
      {     
           var id = window.setTimeout("huan()",3000);     
      }           
}
function dodo(m) 
{        
      n=1;     
      xb = xb+m;    
      if(xb < 0)     
      {         
             xb = jpg.length-1;     
      }     
      else if(xb >= jpg.length)     
      {         
             xb = 0;     
      }     
      tjimg.style.backgroundImage=jpg[xb]; 
} 
window.setTimeout("huan()",3000);</script>
View Code

效果如下圖：

五、相關元素操作：

var a = document.getElementById("id");找到a；

var b = a.nextSibling，找a的下一個同輩元素，註意包含空格；

var b = a.previousSibling，找a的上一個同輩元素，註意包含空格；

var b = a.parentNode，找a的上一級父級元素；

var b = a.childNodes，找出來的是數組，找a的下一級子元素；

var b = a.firstChild，第一個子元素，lastChild最後一個，childNodes[n]找第幾個；

alert(nodes[i] instanceof Text); 判斷是不是文本，是返回true，不是返回flase，用if判斷它的值是不是false，可以去除空格。

六、元素的創建、添加、刪除：

var a = document.getElementById("id");找到a；

var obj = document.createElement("標簽名")；創建一個元素

obj.innerHTML = "hello world";添加的時候首先需要創建出一個元素。

a.appendChild(obj);向a中添加一個子元素。

a.removeChild(obj);刪除一個子元素。

列表中a.selectedIndex:選中的是第幾個;

//a.options[a.selectIndex]按下標取出第幾個option對象

七、字元串的操作：

var s = new String(); 或var s ="aaaa";

var s = "hello world";

alert(s.toLowerCase());轉小寫 toUpperCase() 轉大寫

alert(s.substring(3,8));從第三個位置截取到第八個位置

alert(s.substr(3,8));從第三個位置開始截取，截取八個字元長度，不寫後面的數字是截到最後.

s.split('');將字元換按照指定的字元拆開，放入數組，自動排序

s.length是屬性

s.indexOf("world");world在字元串中第一次出現的位置，沒有返回-1

s.lastIndexOf("o");o在字元串中最後一次出現的位置

八、日期時間的操作

var d = new Date();當前時間

d.setFullYear(2015,11,6);/*在想要設置的月份上減1設置*/

d.getFullYear:取年份；

 d.getMonth():取月份，取出來的少1；

d.getDate():取天；

d.getDay():取星期幾

d.getHours():取小時；

d.getMinutes():取分鐘；d.getSeconds():取秒

d.setFullYear():設置年份，設置月份的時候註意-1。

九、數學函數的操作

Math.ceil();大於當前小數的最小整數

Math.floor();小魚當前小數的最大整數

Math.sqrt();開平方

Math.round();四捨五入

Math.random();隨機數，0-1之間

十、小知識點

外面雙引號，裡面的雙引號改為單引號；

在div裡面行高設置時，無論設置多麼高，所占用的行預設在中間位置（div上下區域內中間——【預設】垂直居中）。

文本框取出來的值是字元串，需要用parseint（）轉化為數字

s.match(reg); s代表一個字元串，reg代表一個字元串，兩者進行匹配，如果兩個字元串不匹配，返回一個null。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Windows和Linux（Ubuntu）下安裝Scala及ScalaIDE
    Windows和Linux（Ubuntu）下安裝Scala及ScalaIDE ...
  • frist Django app — 四、 完善View
    上一篇已經完成了polls的基本功能，接下來完善剩下的vote功能和並使用generic views改進請求處理view。包含表單的簡單運用和前後臺參數傳遞。 目錄 vote：完善投票功能 generic views：改進views.py vote 編輯detail.html，添加投票投票功能 添加 ...
  • C++虛函數
    虛函數引入原因：為了方便使用多態特性，我們常常需要在基類中定義虛函數，在子類中實現虛函數。 class Cman { public: virtual void Eat(){……}; void Move(); private: }; class CChild : public CMan { publi ...
  • Learning Django Resources
    Learning Django Django makes it easier to build better Web apps more quickly and with less code. Web Resource 1. "Django Project Doucment" 2. "Django ...
  • springmvc+mybatis+spring 整合
    獲取【下載地址】 【免費支持更新】三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體【新錄針對本系統的視頻教程，手把手教開發一個模塊，快速掌握本系統】 A集成代碼生成器 [正反雙向(單表、主表、明細表、樹形表，開發利器)+快速構建表單;freemaker模版技術 ...
  • 玩點不同之CSS的BEM規範
    引言 人類自誕生開始，無論是鑿木取火還是製造武器，都是在不斷的解決問題。 所以說，人類的進步就是一個不斷解決問題的過程。 BEM引入背景 因為項目的業務邏輯發生重大變化，所以原來大半年的開發周期里做的事情基本上變成無用功。但是公司的項目上線時間依舊沒有改變。剩下的時間只有區區的兩個月，要做的功能是有 ...
  • javascipt原生設置cookie封裝的模塊，可以直接使用，適合大部分瀏覽器
    ...
  • javascript運算符——位運算符
    [1]二進位 [2]非 [3]與 [4]或 [5]異或 [6]左移 [7]右移 [8]>>> [9]應用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類