javascript DOM object 操作

一、DOM 

DOM（Document Object Model）

1.document 文档 html xml 文件（标记语言）

2.object  对象（HTML元素转成的对象（JS对象））

注意：如果使用JS操作HTMl文档，就需要先将HTML文档结构转成JS对象

a.操作属性

　　对象名.属性名

　　例如：obj.title;

 

b.操作内容

innerText【ie】 textContent【firefox】(获取内容)

innerHTML (获取内容及标签)

outerText (firefox 有兼容问题， 很少用)

outerHTML (获取包括自己标签的内容)

value 表单获取内容 

 

c.操作样式

遇到-把-去掉后面一个单词首字母大写

设置样式

obj.style.backgroundColor = 'red';

obj.style.fontSize = '3cm'; 

获取新式

alert(obj.style.width);

注意：必须有写行内样式才能获取到

 

获取自身的高度， 宽度

obj.offsetwidth

obj.offsetHeight

 

使用className 设置样式

obj.className = 'alink';  //添加类

obj.className += ' alink1'; //追加类

obj.className = '' //清除类

 

　　以上三点操作之前先转成对象

 

转成对象的两种形式

1、标签名（多个）、id（唯一） 、 name（多个）

document中的三个方法

var obj = document.getElementsByTagName('div');

var obj = document.getElementById('one');

var obj = document.getElementsByName('two');

 

2、通过数组

document.title

document.body

document.frames

document.all

document.embeds

document.scripts

document.applets

document.images

document.forms

document.styleSheets

document.links

 

　　获取数组数据的方式

    <form name="frm">
        <input type="text" name='user' value="fegrace" /> 
    </form>

    <script type="text/javascript">
        alert(document.forms[0].user.value); 
        alert(document.forms['frm'].user.value); 
        alert(document.forms.item(0).user.value); 
        alert(document.forms.item('frm').user.value); 
        alert(document.frm.user.value); 
        alert(document['frm']['user'].value); 
        alert(document.forms.frm.user.value); 
    </script>

 

    //获取文本，兼容Ie 火狐
    function ffie(obj , value){
        if (document.all){
            if (typeof(value)  == 'undefined'){
                return obj.innerText; 
            } else {
                obj.innerText = value;  
            }
        } else {
            if (typeof(value)  == 'undefined'){
                return obj.textContent; 
            } else {
                obj.textContent = value;  
            }
        }
    }

 

遍历出某标签所有属性

    var obj = document.getElementById("one"); 
    var pro = ''; 
    for (pro in obj) {
        document.write('a.'+pro+'='+obj[pro]+'<br/>'); 
    };