DOM对象(document)

DOM对象(文档对象模型)

属性:

    document title     访问页面的标题
    document URL       访问完整的URL
    document bgcolor   背景颜色
    document fgcolor   前景色
    改变标题的值:   document.title=""

   *代表所有的标签(文档)

    var a = document.getElementSByTayName("*");
    
    console.log(a.length);

   兼容性问题:

   name属性使用在表单TayName只能找到form表单中的name属性(针对IE浏览器,其它的浏览器能找到) IE用alert,不能用console.log

    document.getElementSByclassName   存在兼容性问题在IE中不支持

    document.getById  (取Id的值)

    document.getTagName  (返回集合对象数组,可以通过*方式获取页面上所有的元素)

    document.getByName   (IE浏览器中,存在于form表单中,div中的不能正常显示)

    document.getClassName  (IE存在兼容器解决兼容性问题)

   对象集合:

   all只存在于IE浏览器中
    
    if(document.all)
    alert("IE")
    else{alert("Not IE")}
    只能在IE中使用,判断兼容性
    IE浏览器显示"IE",moz显示"Not IE"

   Form

   获取表单的方式:通过下标的方式==根据index获取

   通过form表单属性值获取

    console.log(document.form[0]);

    console.log(document.forms["form2"]);====直接命名form    多个form表单为forms;form2===传入name="form2"的值;

    console.log(document.form2)===直接document.name的值来获取    name="from2"

    console.log(document.form1.name[0].value);
    第二个用forms  表单命名第一个 取name[21] value的值

    取值value里面的值,name如果没有命名,可选name后面的值取

操作元素内容:

    innerHTML   获取标签中的内容,包括标签(控制台)(浏览器都支持)(内部)

    innerText   返回文本,不包含标签,火狐不兼容(IE支持)

    textContent  火狐/IE/谷歌都支持

获取属性操作:

    console.log(btn.id)
                      name/type/className  分别获取相应的值;

    console.log(btn.getAttribute("id"))
                                      "name"/"type"/"class"  分别获取相应的值;

获取样式操作:先取值(取id的值)后开始设置样式

    div.style.width = "100px" 后依次设置样式;

    window.οnlοad=function(){
    var div = window.document.getElementById("div");
    div.style.display="block";
    div.style.textDecoration="none";
    div.style.width="100px";
    div.style.height="50px";
    div.style.lineHeight="50px";
    div.style.textAlign="center";

    console.log(div.style.widht = parSeInt(div.style.width)+100+"px");===赋值增加宽度的值;

设置伪类:

    btn.onmouseeover = function(){
    对象 鼠标进入事件时             this.style.background......

    btn.onmouseout = function(){
    对象 鼠标移出事件时             this.style.background......(无值用""表示)

解决imerText以及textContent兼容问题

1.可以设置对象的内容;

2.可以获取对象的内容;

css通过className修改样式:

    window.οnlοad=function(){

    alert(document.styleSheets[1].rules[1].style.width);//取值第二个style里第二个类名的样式的宽度的值;火狐不支持,ie存在兼容,谷歌支持

    alert(document.styleSheets[0].cssRules[1].style.width);//取值第一个style里第二个类名样式的宽度的值;火狐,谷歌支持,ie存在兼容性

    document.styleSheets[0].insertRule("#a{width:200px;height:200px;background:green}",1);//ie,谷歌,火狐都支持

    document.styleSheets[1].addRule("#b","width:200px;height:200px;background:yellow",1);//谷歌支持,ie,火狐都不支持

    document.styleSheets[0].deleteRule(0);//谷歌,火狐支持,ie不支持

    document.styleSheets[0].removeRule(0);//谷歌支持,火狐和ie不支持

最终样式,只能读取,不能操作

    alert(a.currentStyle.width)   针对火狐

    alert(window.getCornPutedStyle(a.null).width)      针对谷歌/IE
                             传入要获取的值,只能获取,不能传入;


设置:

    client width+""+client height    (content+padding)   读取值

    offset width+""+offset height    (content+padding+border)  读取值