搜尋
首頁web前端js教程javascript 內建物件（部分內容）

javascript 內建物件（部分內容）

php是最好的语言
php是最好的语言
Aug 09, 2018 pm 03:32 PM
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()。

相關推薦：

處理文字部分內容的TextRange物件應用實例

《JavaScript闖關記》之單體內建物件

以上是javascript 內建物件（部分內容）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
JavaScript的演變：當前的趨勢和未來前景JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。

Python還是JavaScript更好？Python還是JavaScript更好？Apr 06, 2025 am 12:14 AM

Python更适合数据科学和机器学习，JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称，适用于数据分析和Web开发。2.JavaScript是前端开发核心，Node.js支持服务器端编程，适用于全栈开发。

如何安裝JavaScript？如何安裝JavaScript？Apr 05, 2025 am 12:16 AM

JavaScript不需要安裝，因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中，通過標籤嵌入HTML文件中運行。 2)在Node.js環境中，下載並安裝Node.js後，通過命令行運行JavaScript文件。

在Quartz中如何在任務開始前發送通知？在Quartz中如何在任務開始前發送通知？Apr 04, 2025 pm 09:24 PM

如何在Quartz中提前發送任務通知在使用Quartz定時器進行任務調度時，任務的執行時間是由cron表達式設定的。現�...

在JavaScript中，如何在構造函數中獲取原型鏈上函數的參數？在JavaScript中，如何在構造函數中獲取原型鏈上函數的參數？Apr 04, 2025 pm 09:21 PM

在JavaScript中如何獲取原型鏈上函數的參數在JavaScript編程中，理解和操作原型鏈上的函數參數是常見且重要的任�...

微信小程序webview中Vue.js動態style位移失效是什麼原因？微信小程序webview中Vue.js動態style位移失效是什麼原因？Apr 04, 2025 pm 09:18 PM

在微信小程序web-view中使用Vue.js動態style位移失效的原因分析在使用Vue.js...

在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果？在Tampermonkey中如何實現對多個鏈接的並發GET請求並依次判斷返回結果？Apr 04, 2025 pm 09:15 PM

在Tampermonkey中如何對多個鏈接進行並發GET請求並依次判斷返回結果？在Tampermonkey腳本中，我們經常需要對多個鏈...

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7449
15
CakePHP 教程
1374
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
40
19
NYT連接提示和答案
14
7
顯示更多