JavaScript.DOM核心对象

Posted jacky912

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript.DOM核心对象相关的知识,希望对你有一定的参考价值。

javascript-document对象

  document(DOM核心对象)

  作用:内容innerhtml

     属性

     样式

  document对象

   一、属性

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

     URL返回当前文档的url

     bgcolor设置文档的背景颜色

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

   二、方法

     getElementById(idname)返回拥有指定id的(第一个)对象的引用

       innerHTML 属性设置或返回表格行的开始和结束标签之间的HTML

     getElementsByTagName(tagname)  返回带有指定标签签名的对象的集合

     getElementsByName(name)  返回带有指定name标签签名的对象的集合

     getElementsByName(name)在IE中不兼容的,在IE表单中是可以兼容的

      如果是IE:

          如果该对象的标准属性包含有name,那么可以正确使用,否则不可以使用

      如果是FF:

          该方法可以使用于任何方法

      结论:

          主要适用于表单

     getElementsByclassName()返回带有指定classname指定名称的对象集合

  三、document对象的集合

    all  所以元素的集合,不兼容

    forms   返回对文档中所以form对象的引用

      通过集合来访问所有的对象

      1.通过下标的形式,弹出表单的name

      2.通过name的形式

    anchors   返回对文档中所有anchors对象的引用(即所有a链接)

    images     返回对文档中所有image对象的引用

    links   返回文档中所有area对象和link对象的引用

 

JavaScript——DOM对document对象的内容、属性、样式的操作

  一、操作内容

    1.innerHTML  用来设置或获取对象起始和结束标签内的内容(识别html标签)

     2.innertext   用来设置或获取对象起始和结束标签的内容(兼容ie,获取文本)

     textcontent  用来设置或获取对象起始和结束标签的内容(兼容FF,获取文本)

        注意区别innerHTML和innertext,第一个会识别样式,第二个只会识别文本,但是在FF中不兼容,要使用textcontent。支持document.all的是IE

    3.outerHTML  用来设置或获取包括本对象在内起始和结束标签内的内容(识别HTML标签)

     outertext   用来设置或获取包括本对象在内起始和结束标签内的内容

  二、操作属性

    1.直接操作

      对象.属性

      对象.属性=值(设置、获取、添加属性(属性值))

    2.获取和设置

      getAttribute(“属性”)获取给定的属性值

      setAttribute(“属性”,“值”)设置或添加属性

  三、操作样式

    1.行内样式

      对象.style.属性

      对象.style.属性=值(设置、获取、添加属性)

        遇到属性是“-”链接的,要将“-”去掉,后面的单词的首字母大写

    2.css层叠样式

      通过更改id改变样式(一般不用,不更改ID)

      通过ClassName更改样式

      更改或者获取或者设置某个属性的值  

        document.styleSheets[下标].rules[下标].style.属性
        document.styleSheets[下标].rules[下标].style.属性=值

        document.styleSheets 样式表的集合,即是<style></style>的数量
        document.styleSheets[0].rules 样式规则的列表,即其中的<div>等的个数
        document.styleSheets[0].rules.style 样式规则的集合
        document.styleSheets[下标].rules[下标].style.属性        (适用于ie)

      

        document.styleSheets[下标].cssRules[下标].style.属性
        document.styleSheets[下标].cssRules[下标].style.属性=值    (适应于FF)

        

      动态的添加删除css样式规则

        document.styleSheets[下标].insertRule("选择器{属性:值}",位置) FF w3c
        deleteRule(位置) FF w3c

        document.styleSheets[下标].addRule("选择器","属性:值",位置) IE removeRule(位置) IE

    3.行内样式和css层叠样式通过的方式

        对象.currentStyle.属性 IE 用来获得实际的样式属性
        getComputedStyle(对象,null) FF 用来获得实际的样式属性

          (只能获取不能设置)

 








以上是关于JavaScript.DOM核心对象的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript DOM 基础

javascript--DOM概念

JavaScript----DOM

JavaScript(DOM文档对象模型)

JavaScript---DOM对象(DHTML)

JavaScript:DOM编程