• 文档对象模型——DOM


    DOM:文档对象模型,核心对象document,对html元素的样式(颜色、属性、位置)、内容、属性进行动态的改变和操作

    一、document对象

      1.属性

        title   返回或设置当前文档的标题   //document.title="标题名"

        URL   返回当前文档的url            //只能获取不能设置

        bgColor  设置文档的背景色

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

      2.方法(获取元素的方法)

        document.getElementById("")   //通过id名获取元素,id名是唯一的

        document.getElementByTagName()          //通过标签名获取元素集合,不是数组,但可通过数组的方式访问

        document.getElementByClassName()     //通过类名获取元素,存在兼容性问题

        document.getElementByName()             //通过表单的name名获取元素

        document.querySelector()                    //万能选择器,与jquery中的$选择器类似,可通过类名、标签名等获取元素

        document.querySelectorAll()               //获取元素集合

      3.document对象集合

        docment.all          文档所有元素的集合

        document.forms    文档forms对象的集合

        document.anchors   文档锚链接的集合

        document.links          文档所有链接的集合,包括图片地图

        document.images       文档所有图片的集合

    二、元素操作

      1.元素内容的获取与设置

    <div class="word" id="list" str="自定义属性">
        我是文本内容
    </div>

        1)元素内容

    var obj=document.querySelector("div");
    console.log(obj.innerHTML)
    obj.innerText="修改后的文本内容"
    console.log(obj.innerText)

          获取:innerHTML  获取或设置文本内容,包括空格文本

               innerText   获取或设置文本内容

          ps(innerHTML与document.write 的区别:

            document.write直接输出到浏览器中,并且可继续添加write添加内容,innerHTML是对DOM元素的操作,获取或设置文本内容,并且将所有文本内容替换)

          设置:obj.innerHTML="设置的文本内容"    

             obj.innerText="设置的文本内容"

        2)元素的属性

          获取:对于标签自带属性id class等可以直接获取,

             对于自定义属性,可通过getAttribute获取

    console.log(obj.className)
    console.log(obj.id)
    console.log(obj.getAttribute("class"))
    console.log(obj.getAttribute("str"))
    

          设置:直接设置  obj.className="aa";

             通过setAttribute设置属性      obj.setAttribute("str","list")

         3)元素的样式

          获取:

            obj.style.css属性         //只能获取行内样式

            getComputedStyle(元素对象,null).css属性            //获取非行内样式,只能获取不能设置

            obj.currentStyle.css属性                                    //IE浏览器中获取非行内样式,只能获取不能设置

            //对于非行内样式中的属性,有连字符的属性去掉连字符,首字母大写(W3C标准),getComputedStyle在IE中会直接报错,有兼容性问题,因此在封装函数时不可作为判定条件

          设置:(设置的属性都是行内样式,优先级最高,因此注意样式的覆盖)

            单个属性样式的设置       obj.style.css属性="";

            多个属性样式的设置       obj.style.cssText="200px;height:100px";   //多个属性的设置直接将行内样式的Style重新设置

            先给属性添加样式,在通过js给元素添加属性

       2.元素操作

        1)元素的大小

          

             

          

  • 相关阅读:
    PHP实现微信退款的分析与源码实现
    thinkphp对180万数据批量更新支持事务回滚
    在线工具
    php连接redis
    Redis PHP连接操作
    阿里大于短信接口整合TP5
    Unity3d中如何查找一个脚本被挂在那些预设上面?
    泰课在线夜猫的贪食蛇
    EasyTouch5ForSiki学院
    unity游戏热更新
  • 原文地址:https://www.cnblogs.com/wykbk/p/6894017.html
Copyright © 2020-2023  润新知