javascript-document对象

javascript-document对象

DOM document(html xml) object model
document对象(DOM核心对象)

dom对象的作用:
1.对html页面中的内容进行操作
2.对html页面中的属性进行操作
3.对html页面中的样式进行操作

一、属性

title 返回或者设置当前文档的标题

    document.write(document.title);
    document.write("<br/>");
    document.title="DOM对象";
    document.write(document.title);

URL返回当前文档的url

    document.write(document.URL);
    document.write("<br/>");
    document.write(location.href);

bgColor设置文档的背景色

    document.bgColor="pink";

fgColor设置文档的前景色(文字的颜色)

    document.fgColor="blue";

二、方法

document.getElementById("idName")返回拥有指定id的第一个对象的引用

<div id="one">DOM对象1</div>
<div id="one">DOM对象2</div>
<hr>
<script>
    var div1=document.getElementById("one");
    document.write(div1.innerHTML); //输出 DOM对象1
</script>

document.getElementsByTagName("tagName")返回带有指定标签名的对象的集合

<div id="one">DOM对象1</div>
<div id="two">DOM对象2</div>
<hr>
<script>

    var divs=document.getElementsByTagName("div");
    var lengths=divs.length;
    document.write(lengths);
    document.write("<br/>");
    for (var i=0;i<lengths;i++){
        document.write(divs[i].innerHTML+" ");
    }
</script>

输出

2
DOM对象1 DOM对象2 

document.getElementsByName("name")返回带有指定name(名称)的对象的集合

<form>
    <input type="radio" name="sex" value="boy">男
    <input type="radio" name="sex" value="girl">女
</form>
<hr>
<script>
    var inputs=document.getElementsByName("sex");
    document.write(inputs.length); //输出 2
</script>

document.getElementsByClassName("className")返回带有指定className(类名)的对象的集合(ie8以下不支持)

<div id="one" class="box">DOM对象1</div>
<div id="two" class="box">DOM对象2</div>
<hr>
<script>
    var boxes=document.getElementsByClassName("box");
    document.write(boxes.length);  //输出 2
</script>

兼容写法

    function byClassName(className) {
            var tag=document.getElementsByTagName("*");
            var elements=[];
            for(var i=0;i<tag.length;i++){
                if(tag[i].className==className){
                    elements.push(tag[i]);
                }
            }
            return elements;
    }
    
    var boxes=byClassName("box");
    document.write(boxes.length); //输出 2

document.write()

四、document对象的集合

1.all所有元素的集合

    document.write(document.all);

2.form所有form对象的引用

通过集合来访问相应的对象

2.1通过下标的形式

<form name="userForm">
    <input type="radio" name="sex" value="boy" checked>男
    <input type="radio" name="sex" value="girl">女
</form>
<hr>
<script>
    document.write(document.forms[0].sex.value); //输出 boy
</script>

2.2通过name的形式(如果对象的标准属性包含有name,那么可以正常使用，否则[IE]不可正常使用。)

<form name="userForm">
    <input type="radio" name="sex" value="boy" checked>男
    <input type="radio" name="sex" value="girl">女
</form>
<hr>
<script>
    document.write(document.forms["userForm"].sex.value); //输出 boy
</script>

3.anchors所有anchor(<a>连接)对象的引用

4.images所有image对象的引用

5.links所有area对象和links对象的引用