JavaScriptドキュメントメソッドの概要-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScriptドキュメントメソッドの概要

Nov 28, 2016 pm 03:10 PM

javascript

次のメソッドは非常に一般的に使用されます。脳のスペースを解放するために記録してください~

document.title      //设置文档标题等价于HTML的&lt;title&gt;标签
document.bgColor    //设置页面背景色
document.fgColor    //设置前景色(文本颜色)
document.linkColor  //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL        //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate    //文件建立日期，只读属性
document.fileModifiedDate   //文件修改日期，只读属性
document.fileSize   //文件大小，只读属性
document.cookie     //设置和读出cookie
document.charset    //设置字符集 简体中文:gb2312

ログイン後にコピー

よく使用されるオブジェクトメソッド:

document.write()                //动态向页面写入内容
document.createElement(Tag)     //创建一个html标签对象
document.getElementById(ID)     //获得指定ID值的对象
document.getElementsByName(Name)    //获得指定Name值的对象
document.body.appendChild(oTag)

ログイン後にコピー

body メインサブオブジェクト:

document.body           //指定文档主体的开始和结束等价于&lt;body&gt;&lt;/body&gt;
document.body.bgColor   //设置或获取对象后面的背景颜色
document.body.link      //未点击过的链接颜色
document.body.alink     //激活链接(焦点在此链接上)的颜色
document.body.vlink     //已点击过的链接颜色
document.body.text      //文本色
document.body.innerText     //设置&lt;body&gt;...&lt;/body&gt;之间的文本
document.body.innerHTML     //设置&lt;body&gt;...&lt;/body&gt;之间的HTML代码
document.body.topMargin     //页面上边距
document.body.leftMargin    //页面左边距
document.body.rightMargin   //页面右边距
document.body.bottomMargin  //页面下边距
document.body.background    //背景图片
document.body.appendChild(oTag)     //动态生成一个HTML对象

ログイン後にコピー

よく使用されるオブジェクトイベント:

document.body.onclick ="func()" //マウスポインターでオブジェクトをクリックするとトリガーされます

document.body.onmou<a href="http://www.php.cn/category/111.html">seo</ a>ver="func() " //マウスポインターがオブジェクトに移動するとトリガーされます

document.body.onmou<a href="http://www.php.cn/category/111.html"> seo</a>ut="func( ;

document.location.hash      // #号后的部分
document.location.host      // 域名+端口号
document.location.hostname  // 域名
document.location.href      // 完整URL
document.location.pathname  // 目录部分
document.location.port      // 端口号
document.location.protocol  // 网络协议(http:)
document.location.search    // ?号后的部分

ログイン後にコピー

nane 属性で

documeny.location.reload()      //刷新网页
document.location.reload(URL)   //打开新的网页
document.location.assign(URL)   //打开新的网页
document.location.replace(URL)  //打开新的网页

ログイン後にコピー

を直接参照画像

1	`document.selection`

ログイン後にコピー

の src 属性を参照画像

document.images //对应页面上的&lt;img&gt;标签
document.images.length //对应页面上&lt;img&gt;标签的个数
document.images[0] //第1个&lt;img&gt;标签
document.images[i] //第i-1个&lt;img&gt;标签

ログイン後にコピー

を作成同時に <img> ; 対応するページ上のタグを表示します

サンプルコード (動的に作成された画像):

1 2	`<img>` `document.images.oImage` `//document.images.name属性`

ログイン後にコピー

forms コレクション (ページ内のフォーム):

コレクションを介して参照

1	`document.images.oImage.src` `//document.images.name属性.src`

ログイン後にコピー

タグ名属性

var oImage
oImage = new Image()
document.images.oImage.src=&quot;1.jpg&quot;

ログイン後にコピー

を介して直接参照

フォームのプロパティへのアクセス:

&lt;html&gt;
&lt;img&gt;
&lt;script&gt;
    var oImage
    oImage = new Image()
    document.images.oImage.src=&quot;1.jpg&quot;
&lt;/script&gt;
&lt;/html&gt;

ログイン後にコピー

サンプルコード (フォーム):

document.forms          //对应页面上的&lt;form&gt;标签
document.forms.length   //对应页面上&lt;form&gt;标签的个数
document.forms[0]       //第1个&lt;form&gt;标签
document.forms[i]       //第i-1个&lt;form&gt;标签
document.forms[i].length        //第i-1个&lt;form&gt;中的控件数
document.forms[i].elements[j]   //第i-1个&lt;form&gt;中第j-1个控件

ログイン後にコピー

サンプルコード (チェックボックス):

1 2	`<form><input></form>` `document.Myform.myctrl` `//document.表单名.控件名`

ログイン後にコピー

サンプルコード (選択):

document.forms[i].name      //对应&lt;form name&gt;属性
document.forms[i].action    //对应&lt;form action&gt;属性
document.forms[i].encoding  //对应&lt;form enctype&gt;属性
document.forms[i].target    //对应&lt;form target&gt;属性
document.forms[i].appendChild(oTag)     //动态插入一个控件

ログイン後にコピー

Div コレクション (ページ内のレイヤー):

&lt;html&gt;
&lt;!--Text控件相关Script--&gt;
&lt;form&gt;
&lt;input&gt;
&lt;input&gt;
&lt;form&gt;
&lt;script&gt;
//获取文本密码框的值
document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
&lt;/script&gt;
&lt;/html&gt;

ログイン後にコピー

レイヤーオブジェクトの 4 つのプロパティ:

&lt;html&gt;
&lt;!--checkbox,radio控件相关script--&gt;
&lt;form&gt;
&lt;input value=&quot;1&quot;&gt;1
&lt;input value=&quot;2&quot;&gt;2
&lt;/form&gt;
&lt;script&gt;
function fun()
{
 //遍历checkbox控件的值并判断是否选中
    var length
    length=document.forms[0].chk.length
    for(i=0;i&lt;length;i++){
    v=document.forms[0].chk[i].value
    b=document.forms[0].chk[i].checked
    if(b)
    alert(v=v+&quot;被选中&quot;)
        else
    alert(v=v+&quot;未选中&quot;)
    }
}
&lt;/script&gt;
&lt;a href=&quot;http://www.php1.cn/&quot;&gt;ddd&lt;/a&gt;
&lt;/html&gt;

ログイン後にコピー

サンプルコード:

&lt;html&gt;
&lt;!--Select控件相关Script--&gt;
&lt;form&gt;
&lt;select&gt;
&lt;option value=&quot;1&quot;&gt;1&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;
&lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;script&gt;
 //遍历select控件的option项
    var length
    length=document.Myform.oSelect.length
    for(i=0;i&lt;length;i++)
        document.write(document.Myform.oSelect[i].value)
&lt;/script&gt;
&lt;script&gt;
    //遍历option项并且判断某个option是否被选中
    for(i=0;i&lt;document.Myform.oSelect.length;i++)
    {
        if(document.Myform.oSelect[i].selected!=true)
            document.write(document.Myform.oSelect[i].value)
        else
            document.write(&quot;&lt;font color=red&gt;&quot;+document.Myform.oSelect[i].value+&quot;&lt;/font&gt;&quot;)
    }
&lt;/script&gt;
&lt;script&gt;
    //根据SelectedIndex打印出选中的option
    //(0到document.Myform.oSelect.length-1)
    i=document.Myform.oSelect.selectedIndex
    document.write(document.Myform.oSelect[i].value)
&lt;/script&gt;
&lt;script&gt;
    //动态增加select控件的option项
    var oOption = document.createElement(&quot;OPTION&quot;);
    oOption.text=&quot;4&quot;;
    oOption.value=&quot;4&quot;;
    document.Myform.oSelect.add(oOption);
&lt;/script&gt;
&lt;html&gt;