zoukankan      html  css  js  c++  java
  • javaScript之DOM对象

    1概念:Document Object Model 文档对象模型

          将标记语言文档的各个组成部分封装成对象,可以使用这些对象对文档做crud的动态操作

    *w3c Dom标准被分为3个不同的部分

        1核心Dom 针对任何结构化文档的标准模型

          *Document: 文档对象

          *Element元素对象

          *Attribute:属性对象

          *Text :文本对象    

          *comment:注释对象

          *Node 节点对象

          *xml Dom 针对xml文档的标准模型

          *HTML DOM -针对html文档的标准模型

     核心DOM对象

        Document 文档对象  

          创建获取:在html Dom模型中可以使用window对象来获取

            1window.document

            2Document

        2方法:    

          获取Element对象  

          1getElementById(),根据id属性值获取元素对象,id属性值一般唯一

          2 getElementsByTagName()根据元素名称获取元素对象们 ,获得的是一个数组

          3getElementsByClassName() 根据class属性值获取元素对象们。获得的是一个数组

          4getElemmentByName() 根据name属性值获取元素对象们,返回值时一个数组

      2创建其他dom对象

            createAttribute(name)//穿件属性对象

            createComment() 创建注释对象

            createElement()创建元素对象

            createTextnode()创建文本节点对象

          3属性:

          Element元素对象

            1可以通过documen对象进行创建或者获取

            2方法:

              romveAttribute()删除属性

              SetAttribute()设置属性

        Node:节点对象,其他5个的父对象

          特点:所有的dom对象都可以认为是一个节点对象

          方法 crud dom树  

            *appendchild()向节点的子节点列表的结尾添加新的子节点

            *removechild删除(并返回)当前节点指定的子节点

            *replacechild():用新节点电替换一个子节点

        html DOM

          1标签体的设置和获取:innerHtml 

          2使用html元素对象的属性

          3控制元素样式

            1使用元素样式  

              如:

              //修改样式方式1

                

        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size--> fontSize
        div1.style.fontSize = "20px";

        2提前定义号类选择器的样式,通过元素的className属性来设置class属性值

    DOM对象图解

     

  • 相关阅读:
    android实现简单计算器
    象牙塔尖
    Jquery 限制文本框输入字数【转】
    jquery 文字向上滚动+CSS伪类before和after的应用
    鼠标移入 移出div div会消失的处理
    ionic 项目分享【转】
    JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
    封装鼠标滚轮事件,兼容方法。。。拿去用吧
    3、bootstrap3.0 栅格偏移 布局中的一个特产
    html input[type=file] css样式美化【转藏】
  • 原文地址:https://www.cnblogs.com/qmk-716/p/12031725.html
Copyright © 2011-2022 走看看