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中文網其他相關文章！
JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr
node.js流帶打字稿Apr 30, 2025 am 08:22 AMNode.js擅長於高效I/O，這在很大程度上要歸功於流。 流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE
Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AMPython和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。
JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AMJavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。
幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AMJavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。
Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AMPython和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。
Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AMPython和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
WebStorm Mac版
好用的JavaScript開發工具
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
禪工作室 13.0.1
強大的PHP整合開發環境
