javascript 內建物件（部分內容）
text物件
Text 物件代表 HTML 表單中的文字輸入域。在HTML 表單中input type=”text 每出現一次，Text 物件就會被建立。
disabled 設定或傳回文字網域是否應停用。（只有true和false兩個值）
readOnly 設定或傳回文字域是否應是唯讀（只能讀取，不能被修改）的。（只有true和false兩個值）
value 設定或傳回文字域的value 屬性的值。
focus() 在在文字網域上設定焦點。
eg：
<form>
<input name="wd" />
<input type="button" onclick="onesubmit()" value= "搜索" />
</form>
<script>
var form = document.getElementsByTagName("form")[0];
form.action = "https://www.baidu.com/s"; var text = document.getElementsByName("wd")[0]; function onesubmit(){
text.value = "中国";//设置或返回文本域的 value 属性的值
console.log(text.value);
text.focus();//在文本域上设置默认焦点
text.readOnly = true;//设置或返回文本域是否应是只读的 即不能更改
text.disabled = true;//设置或返回文本域是否应被禁用,即不能使用
} </script>radio物件
Radio 物件代表HTML 表單中的單選按鈕。
checked 設定或傳回單選按鈕的狀態。（true 和false）
disabled 設定或傳回是否停用單選按鈕。
value 設定或傳回單選按鈕的value 屬性的值。
checkbox物件
Checkbox 物件代表一個HTML 表單中的一個選擇框。
checked 設定或傳回多選按鈕的狀態。
disabled 設定或傳回某個按鈕是否應停用。
value 設定或傳回checkbox 的value 屬性的值。
eg：
<body>
<form onsubmit="return check()">
用户名<input name="user_name" id="user_name" /><br />
密码<input name="password" id="password" type="password" /><br />
确认密码<input name="pw_check" id="pw_check" type="password" /><br />
<input type="reset" value="重置" />
<input type="submit" value="注册" />
<input type="radio" name="sex" value="男" />男 <input type="radio" name="sex" value="女" />女 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球 <input type="checkbox" name="hobby" value="足球" />足球 <select name="choose" id="choose">
<option value="gaoyi">高一</option>
<option value="gaoer">高二</option>
<option value="gaosan">高三</option>
</select>
</form>
<span id="msg" style="color: red;"></span>
<script>
function $(id){
return document.getElementById(id);
} function check(){
var selects = document.getElementById("choose");
selects.disabled=true;
console.log(selects.length);
console.log(selects.selectedIndex); var options = selects.options; for(var i=0;i<options.length;i++){
console.log(options[i].value)
}
console.log("$$$$$$$$$$$$$$$$$$$$$$$$$$$$"); var radios = document.getElementsByName("sex"); for(var i=0;i<radios.length;i++){
console.log(radios[i].checked+radios[i].value);
}
radios[0].cheked=true;
radios[0].disabled=true;
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); var checkboxes = document.getElementsByName("hobby"); for(var i=0;i<checkboxes.length;i++){
console.log(checkboxes[i].checked+checkboxes[i].value)
}
checkboxes[2].checked=true;
checkboxes[2].disabled=true;
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~"); var user_name = $("user_name").value; var password = $("password").value; var pw_check = $("pw_check").value; if(user_name.length==0){
$("msg").innerHTML = "用户名不能为空"; return false;
} else if(user_name.length>12){
$("msg").innerHTML = "用户名不能超过12个字符"; return false;
} if(password.length==0){
$("msg").innerHTML = "密码不能为空"
return false;
} else if(password.length>15){
$("msg").innerHTML = "密码不能超过12个字符"; return false;
} if(password!=pw_check){
$("msg").innerHTML = "密码不一致"; return false;
}
console.log("注册成功") return false;
} </script>
</body>Select物件
Select 物件代表HTML 表單中的一個下拉清單。
options[ ] 傳回包含下拉清單中的所有選項的一個陣列。
disabled 設定或傳回是否應停用下拉清單。
length 傳回下拉清單中的選項數目。
selectedIndex 設定或傳回下拉清單中被選項目的索引號。（從0開始）
add() 向下拉列表新增一個選項。
remove() 從下拉清單中刪除一個選項。
option物件
Option(text,value) 透過text（即option標籤之間的值）和value值建立Option物件
selected 設定或傳回selected 屬性的值。(true或false，即是否已選取）
text 設定或傳回某個選項的純文字值。
value 設定或傳回被送到伺服器的值。
eg:
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<select id="selected">
<option value="小学一年级">一年级</option>
<option value="小学二年级">二年级</option>
<option value="小学三年级">三年级</option>
<option value="小学四年级">四年级</option>
<option value="小学五年级">五年级</option>
<option value="小学六年级">六年级</option>
</select>
<input type="button" onclick="test()" value="按钮" />
<script>
function test(){
var selects = document.getElementById("selected");
console.log(selects.disabled);
console.log(selects.selectedIndex);
console.log(selects.length);
console.log("@@@@@@@@@@@@@@@@@@@@@@@@"); var options = selects.options;
console.log(options[selects.selectedIndex]);
console.log("$$$$$$$$$$$$$$$$$"); for (var i=0;i<options.length;i++){
console.log(options[i].value);
console.log(options[i].selected);
console.log(options[i].text);
}
console.log("######################"); var option1 = new Option("初一","初中一年级"); var option2 = new Option("初二","初中二年级"); var option3 = new Option("初三","初中三年级");
selects.add(option2);
selects.add(option1);
selects.remove(6);
selects.add(option2);
selects.add(option3);
selects.remove(0);
selects.remove(0);
selects.remove(0);
selects.remove(0);
selects.remove(0);
selects.remove(0);
} </script>
</body></html>element 物件
在HTML DOM中，Element對象表示HTML元素，該物件可以擁有類型為元素節點、文字節點、註解節點的子節點。透過Document物件的getElementById()方法、getElementsByTagName()或getElementsByName()方法取得Element物件。
element.className 設定或傳回元素的 class 屬性。
element.innerHTML 設定或傳回元素的內容。
element.style 設定或傳回元素的 style 屬性。
element.parentNode 以Node 物件方式傳回元素的父節點。
eg:
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script>
function news(){
var elements1 = document.getElementById("news");
elements1.className = "selected"; var elements2 = document.getElementById("see");
elements2.className = "fault"; var elements3 = document.getElementById("list1");
elements3.className = "visited"; var elements3 = document.getElementById("list2");
elements3.className = "unvisited";
} function see(){
var elements = document.getElementById("news");
elements.className = "fault";
var elements2 = document.getElementById("see");
elements2.className = "selected"; var elements3 = document.getElementById("list1");
elements3.className = "unvisited"; var elements3 = document.getElementById("list2");
elements3.className = "visited";
} </script>
<style>
body { color: #333; padding: 5px 0; font: 12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background: #fff; }
a{ color: #666; text-decoration: none; }
a:visited{ color:#666; }
p{ display: block; }
#main{ position: relative; display: block; height: 34px; width: 356px; border: 1px solid #dbdee1; line-height: 34px; background: url(img/bg1px.png) 0 -33px repeat-x; zoom: 1; /*缩放比例*/
}
#main:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;/*隐藏h2标签*/
}
#main #menu{ float: left; margin-left: -2px; }
#main #menu span{ float: left; height: 35px; line-height: 35px; font-size: 16px; font-family: "Microsoft YaHei","微软雅黑","SimHei","黑体"; padding: 0 13px; margin-top: -1px; }
#main #menu .selected{ height: 33px; line-height: 29px; border-top: 3px solid #ff8400; border-left: 1px solid #dbdee1; border-right: 1px solid #dbdee1; background-color: #fff; _position: relative; _margin-bottom: -1px; padding: 0 12px; border-left: 0; padding-left:13px ; }
#main #date{ float: right; display: inline; margin-right: 10px; }
#list1{ position: absolute; }
#list2{ position: absolute; }
#list1 a{ color: #122e67; text-decoration: none; }
#list1 a:visited{ color: #52687e; text-decoration: none; }
#list2 a{ color: #122e67; text-decoration: none; }
#list2 a:visited{ color: #52687e; text-decoration: none; }
.visited{ display: block; }
.unvisited{ display: none; }
ul{ height: auto; height: 208px; overflow: hidden; clear: both; list-style: none; display: block; }
ul li{ padding-left: 10px; line-height: 26px; height: 26px; overflow: hidden; font-size: 14px; background: url(//i0.sinaimg.cn/home/main/index2013/0403/icon.png) no-repeat 0 -881px; _zoom: 1; }
</style>
<body>
<p id="main">
<p id="menu">
<span id="news" class="selected" onmouseover="news()">
<a href="http://news.sina.com.cn/" target="_blank">新闻</a>
</span>
<span id="see" class="fault" onmouseover="see()">
<a href="http://henan.sina.com.cn/" target="_blank">看河南</a>
</span>
</p>
<span id="date">2018.8.6</span>
</p>
<!--main end-->
<p id="list1" class="visited">
<ul>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/xl/2018-08-06/doc-ihhhczfc3414364.shtml">习近平对王继才先进事迹作出重要指示</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/gov/xlxw/2018-08-06/doc-ihhhczfc3730191.shtml">习近平引领科技强军路</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc1300781.shtml">构建更加紧密的中非命运共同体</a>
<a target="_blank" href="http://news.sina.com.cn/zt_d/djbl/">大江奔流</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1539880.shtml">人民日报评论员：积极进取 引领中国经济行稳致远</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-06/doc-ihhhczfc6968447.shtml">百白破你真的了解吗？</a>
<a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc6967406.shtml">关于免疫和疫苗安全的问答</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/nd/2018-08-05/doc-ihhhczfc0144855.shtml">经济日报连发五文 解读当前经济形势</a>
<a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1656430.shtml">三大关键词</a>
</li>
<li><a target="_blank" href="http://news.sina.com.cn/o/2018-08-06/doc-ihhhczfc1674641.shtml">用不靠谱的手段耍弄世界 注定不能让美国再次伟大</a>
</li>
<li><a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhkusks5999396.shtml">全国网络安全员法制与安全知识竞赛报名网站已开启</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/c/2018-08-06/doc-ihhhczfc3323403.shtml">特朗普揶揄中国股市 但不小心暴露自己一个硬伤</a>
</li>
<li>
<a target="_blank" href="http://news.sina.com.cn/zx/2018-08-06/doc-ihhhczfc6757917.shtml">上海机场(集团)有限公司董事长吴建融被查</a>
</li>
</ul>
</p>
<!--list1 end-->
<p id="list2" class="unvisited">
<ul>
<li>
<a href="http://henan.sina.com.cn" target="_blank">177家违规网站被通报 河南全面清退县级以下政府网站</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn">河南四家长联名举报质疑考生答题卡掉包 官方回应</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn/news/z/2018-08-07/detail-ihhkusks7863084.shtml">央视新闻联播聚焦河南 34条洲际航线扩展开放触角</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn/news/m/2018-08-07/detail-ihhkusks7805180.shtml">河南开展幼儿园"小学化"治理:幼儿园严禁教小学课程</a>
</li>
<li>
<a target="_blank" href="http://wx.sina.com.cn/news/2018-08-06/detail-ihhhczfc2526781.shtml">百城致敬40年：专注粮油研究半个世纪</a>
</li>
<li>
<a target="_blank" href="http://henan.sina.com.cn/news/zhuazhan/2018-08-07/detail-ihhkusks7771435.shtml">周末夜查+夜间突击检查 河南"夜查"行动将持续至年底</a>
</li>
</ul>
</p>
<!--list2 end-->
</body>上例是模仿新浪頁面滑鼠移動切換標籤和顯示內容的效果。
window物件
事實上，常用的history,document等物件都屬於window物件中，只是window物件是一個全域變量，在使用中「window.」一般被省略。
document物件
domain 傳回目前文件的域名，例如：www.blue-bridge.com
URL 傳回目前文件的URL，例如：http://www.blue- bridge.com/venus/login.jsp
getElementById() 傳回對擁有指定id 的第一個物件的參考。
getElementsByName() 傳回帶有指定名稱的物件集合。
getElementsByTagName() 傳回帶有指定標籤名的物件集合。
history物件
back() 載入 history 清單中的前一個 URL，同「後退」按鈕。
forward() 載入 history 清單中的下一個 URL，同「前進」按鈕。
go() 載入 history 清單中的某個特定頁面，history.go(-1)//等同於back()。
相關推薦：
以上是javascript 內建物件（部分內容）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
如何利用JavaScript和WebSocket實現即時線上點餐系統
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單
如何使用WebSocket和JavaScript實現線上預約系統
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
簡易JavaScript教學：取得HTTP狀態碼的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教學：如何取得HTTP狀態碼，需要具體程式碼範例前言：在Web開發中，經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時，我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功，並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼，並提供一些實用的程式碼範例。使用XMLHttpRequest
javascript如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數：要插入的新節點和參考節點（即新節點將要插入的位置的節點）。
JavaScript與WebSocket：打造高效率的即時影像處理系統
Dec 17, 2023 am 08:41 AM
JavaScript是一種廣泛應用於Web開發的程式語言，而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能，我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統，並提供具體的程式碼範例。首先，我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備，可以擷取即時的影像數
