• 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 用来获得实际的样式属性

              (只能获取不能设置)

  • 相关阅读:
    Xcode编译报错信息总结
    iOS组件化方案
    xcodebuild命令
    Mac下配置MAMP Pro+PHPStorm
    Sublime Text PHP Mac系统环境配置
    JS生成二维码
    为IE和chrome编写单独的样式
    几个简单的VBS脚本程序以及其JS实现
    vue组件中使用iframe元素
    nginx简易部署
  • 原文地址:https://www.cnblogs.com/jacky912/p/10338602.html
Copyright © 2020-2023  润新知