zoukankan      html  css  js  c++  java
  • DOM操作

    Web APIs——DOM:document object model.

        -应用领域:网页特效、特效

        -文档

    事件:三要素包括,事件源 事件类型   事件处理函数

        事件源.事件类型 = 事件处理函数

        事件类型: onclick onmouseover onmouseout onfocus onblur

                onmousemove onmouseup onmousedown

                ondbclick  

    行内样式为: 建议双引号,“”

    元素查找——>元素操作

        获取元素地内容

        innnerHTML  支持标签

        innerText   不支持

    操作元素属性

        固有属性

            disabled:表示禁用

            checked:true-选中,false-不选中

        1:元素内容

        2:与三俗属性

        3:表单元素属性

        4:样式属性

            -行内样式

                -style.width === style['width']

                -style.height

                -style.backgroundColor

                -className:更改类名 ;应用:更多是灵活切换css中地样式   默认为""

                [class 名称连字符较多]

                -style.display:"none";

    work:

        按钮切换图片:1234,支持随机切换 ——Math

        登录密码:源码与掩码 显示 ——input:password/text || 来回切换

            input && label(设置图片)

        网页换肤效果

        新浪下拉列表

    =========================================================

    自定义属性操作

        标签自带属性:idclassonclick等固有属性

        支持添加属性:获取固有属性,undefined

        获取属性(自定义、固有均支持):  -getAttribute('自定义id名')

        设置属性                        -setAttribute('id名',"vale")

        移除属性:          removeAttribut('属性名')    或者:box.class='';[将值设为空]

        元素.属性   一般只对固有属性进行操作。

        h5设置: data-自定义属性名  data=idx -->  但是获取自定义属性: box.dataset.idx [ie11开始支持]

                                                                    box.dataset[idx]

            data-student-name='zs'  --->   采用驼峰访问

                             box.dataset[studentName]                                                            

    jq

    element

    声明式编程

    ==============================================================================

        element.parentNode      父亲节点

        //获取html元素——父亲为 #document  [document无上一级,返回null]

        var oHtml = document.documentElement

                    document.html

        //不同浏览器兼容性问题:考虑版本问题【完全跟金融领域,又是另一种思维】或者期本质一样,不同金融工具

        //孩子节点 a instanceof Array:并不是数组,只是类数组对象

        ul.childNodes   //注意:包含所有儿子:文本、li、注释、回车换行{

            即: 其长度问题注意!

            ele.nodeType : {

                1:li,元素节点

                3:文本节点,回车换行

                8:注释节点

            }

        }

        // children属性:得到元素的所有子元素-->具体定位某个节点     重点掌握:得到元素的所有元素子节点

        ul.children.length

        // firstChild : 所有孩子的第一个节点【所有儿子包括文本节点中选择第一个】 --- lastChild

        // firstElementChild : ie9+以后支持,

    ==============================================================================

    删除元素:

  • 相关阅读:
    SpringBoot 项目 打包为 Docker镜像
    0/1 nodes are available: 1 node(s) had taints that the pod didn't tolerate.
    注册k8s到rancher时 agent pods一直处于containercreating状态
    linux查看磁盘使用情况
    linux修改系统时间、时区
    windows 添加路由
    Notebook Docker 安装spark环境
    openlayers6加载天地图混乱问题
    Oracle 高效分页
    VSCode 终端无法打开
  • 原文地址:https://www.cnblogs.com/macro-renzhansheng/p/12936500.html
Copyright © 2011-2022 走看看