注意: 这个方法直接修改了类名,也就是说会覆盖原来的类名,原来的就不生效了
如果想要保留原先的类名,这样做:
//假设first 是原来的类名,change是想加入的
this.className = ‘first change’;
表单事件
获得焦点 onfocus
失去焦点 onblur
案例:京东搜索框,默认是“手机”两个字,当用户点击搜索框的时候,“手机”两个字消失,当输入文本之后,保持文本内容不变
分析:
-
如果获得焦点,判断里面是否是默认文字,如果是默认文字,就清空表单内容
-
如果失去焦点,判断表单是否为空,如果为空,则表单内容改为默认文字
-
获得焦点的时候,把文本框里的文字变黑
-
失去焦点的时候,文本框文字变浅
案例:密码提示框,选中的时候提示密码的长度和标准,失去焦点的时候,检查密码是否合乎规范
分析:
-
如果获得焦点,提示密码的长度和标准
-
如果失去焦点,检查密码是否合乎规范,如果不符合规范,就提示
-
因为改变的样式比较多,所以用className来修改样式
操作元素小总结
#mermaid-svg-LNkLA9N8GJMP9QJn .label{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);fill:#333;color:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .label text{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .node rect,#mermaid-svg-LNkLA9N8GJMP9QJn .node circle,#mermaid-svg-LNkLA9N8GJMP9QJn .node ellipse,#mermaid-svg-LNkLA9N8GJMP9QJn .node polygon,#mermaid-svg-LNkLA9N8GJMP9QJn .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-LNkLA9N8GJMP9QJn .node .label{text-align:center;fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .node.clickable{cursor:pointer}#mermaid-svg-LNkLA9N8GJMP9QJn .arrowheadPath{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-LNkLA9N8GJMP9QJn .flowchart-link{stroke:#333;fill:none}#mermaid-svg-LNkLA9N8GJMP9QJn .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-LNkLA9N8GJMP9QJn .edgeLabel rect{opacity:0.9}#mermaid-svg-LNkLA9N8GJMP9QJn .edgeLabel span{color:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-LNkLA9N8GJMP9QJn .cluster text{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-LNkLA9N8GJMP9QJn .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-LNkLA9N8GJMP9QJn text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-LNkLA9N8GJMP9QJn .actor-line{stroke:grey}#mermaid-svg-LNkLA9N8GJMP9QJn .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-LNkLA9N8GJMP9QJn #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .sequenceNumber{fill:#fff}#mermaid-svg-LNkLA9N8GJMP9QJn #sequencenumber{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn #crosshead path{fill:#333;stroke:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .messageText{fill:#333;stroke:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-LNkLA9N8GJMP9QJn .labelText,#mermaid-svg-LNkLA9N8GJMP9QJn .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-LNkLA9N8GJMP9QJn .loopText,#mermaid-svg-LNkLA9N8GJMP9QJn .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-LNkLA9N8GJMP9QJn .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-LNkLA9N8GJMP9QJn .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-LNkLA9N8GJMP9QJn .noteText,#mermaid-svg-LNkLA9N8GJMP9QJn .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-LNkLA9N8GJMP9QJn .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-LNkLA9N8GJMP9QJn .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-LNkLA9N8GJMP9QJn .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-LNkLA9N8GJMP9QJn .mermaid-main-font{font-family:“trebuchet ms”, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .section{stroke:none;opacity:0.2}#mermaid-svg-LNkLA9N8GJMP9QJn .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-LNkLA9N8GJMP9QJn .section2{fill:#fff400}#mermaid-svg-LNkLA9N8GJMP9QJn .section1,#mermaid-svg-LNkLA9N8GJMP9QJn .section3{fill:#fff;opacity:0.2}#mermaid-svg-LNkLA9N8GJMP9QJn .sectionTitle0{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .sectionTitle1{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .sectionTitle2{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .sectionTitle3{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-LNkLA9N8GJMP9QJn .grid .tick text{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .grid path{stroke-width:0}#mermaid-svg-LNkLA9N8GJMP9QJn .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-LNkLA9N8GJMP9QJn .task{stroke-width:2}#mermaid-svg-LNkLA9N8GJMP9QJn .taskText{text-anchor:middle;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .taskText:not([font-size]){font-size:11px}#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-LNkLA9N8GJMP9QJn .task.clickable{cursor:pointer}#mermaid-svg-LNkLA9N8GJMP9QJn .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-LNkLA9N8GJMP9QJn .taskText0,#mermaid-svg-LNkLA9N8GJMP9QJn .taskText1,#mermaid-svg-LNkLA9N8GJMP9QJn .taskText2,#mermaid-svg-LNkLA9N8GJMP9QJn .taskText3{fill:#fff}#mermaid-svg-LNkLA9N8GJMP9QJn .task0,#mermaid-svg-LNkLA9N8GJMP9QJn .task1,#mermaid-svg-LNkLA9N8GJMP9QJn .task2,#mermaid-svg-LNkLA9N8GJMP9QJn .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutside0,#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutside2{fill:#000}#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutside1,#mermaid-svg-LNkLA9N8GJMP9QJn .taskTextOutside3{fill:#000}#mermaid-svg-LNkLA9N8GJMP9QJn .active0,#mermaid-svg-LNkLA9N8GJMP9QJn .active1,#mermaid-svg-LNkLA9N8GJMP9QJn .active2,#mermaid-svg-LNkLA9N8GJMP9QJn .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-LNkLA9N8GJMP9QJn .activeText0,#mermaid-svg-LNkLA9N8GJMP9QJn .activeText1,#mermaid-svg-LNkLA9N8GJMP9QJn .activeText2,#mermaid-svg-LNkLA9N8GJMP9QJn .activeText3{fill:#000 !important}#mermaid-svg-LNkLA9N8GJMP9QJn .done0,#mermaid-svg-LNkLA9N8GJMP9QJn .done1,#mermaid-svg-LNkLA9N8GJMP9QJn .done2,#mermaid-svg-LNkLA9N8GJMP9QJn .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-LNkLA9N8GJMP9QJn .doneText0,#mermaid-svg-LNkLA9N8GJMP9QJn .doneText1,#mermaid-svg-LNkLA9N8GJMP9QJn .doneText2,#mermaid-svg-LNkLA9N8GJMP9QJn .doneText3{fill:#000 !important}#mermaid-svg-LNkLA9N8GJMP9QJn .crit0,#mermaid-svg-LNkLA9N8GJMP9QJn .crit1,#mermaid-svg-LNkLA9N8GJMP9QJn .crit2,#mermaid-svg-LNkLA9N8GJMP9QJn .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-LNkLA9N8GJMP9QJn .activeCrit0,#mermaid-svg-LNkLA9N8GJMP9QJn .activeCrit1,#mermaid-svg-LNkLA9N8GJMP9QJn .activeCrit2,#mermaid-svg-LNkLA9N8GJMP9QJn .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-LNkLA9N8GJMP9QJn .doneCrit0,#mermaid-svg-LNkLA9N8GJMP9QJn .doneCrit1,#mermaid-svg-LNkLA9N8GJMP9QJn .doneCrit2,#mermaid-svg-LNkLA9N8GJMP9QJn .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-LNkLA9N8GJMP9QJn .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-LNkLA9N8GJMP9QJn .milestoneText{font-style:italic}#mermaid-svg-LNkLA9N8GJMP9QJn .doneCritText0,#mermaid-svg-LNkLA9N8GJMP9QJn .doneCritText1,#mermaid-svg-LNkLA9N8GJMP9QJn .doneCritText2,#mermaid-svg-LNkLA9N8GJMP9QJn .doneCritText3{fill:#000 !important}#mermaid-svg-LNkLA9N8GJMP9QJn .activeCritText0,#mermaid-svg-LNkLA9N8GJMP9QJn .activeCritText1,#mermaid-svg-LNkLA9N8GJMP9QJn .activeCritText2,#mermaid-svg-LNkLA9N8GJMP9QJn .activeCritText3{fill:#000 !important}#mermaid-svg-LNkLA9N8GJMP9QJn .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn g.classGroup text{fill:#9370db;stroke:none;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family);font-size:10px}#mermaid-svg-LNkLA9N8GJMP9QJn g.classGroup text .title{font-weight:bolder}#mermaid-svg-LNkLA9N8GJMP9QJn g.clickable{cursor:pointer}#mermaid-svg-LNkLA9N8GJMP9QJn g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-LNkLA9N8GJMP9QJn g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-LNkLA9N8GJMP9QJn .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-LNkLA9N8GJMP9QJn .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-LNkLA9N8GJMP9QJn .dashed-line{stroke-dasharray:3}#mermaid-svg-LNkLA9N8GJMP9QJn #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn .commit-id,#mermaid-svg-LNkLA9N8GJMP9QJn .commit-msg,#mermaid-svg-LNkLA9N8GJMP9QJn .branch-label{fill:lightgrey;color:lightgrey;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .slice{font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-LNkLA9N8GJMP9QJn g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-LNkLA9N8GJMP9QJn g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-LNkLA9N8GJMP9QJn g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-LNkLA9N8GJMP9QJn .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-LNkLA9N8GJMP9QJn .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-LNkLA9N8GJMP9QJn .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-LNkLA9N8GJMP9QJn .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-LNkLA9N8GJMP9QJn .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-LNkLA9N8GJMP9QJn .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-LNkLA9N8GJMP9QJn .edgeLabel text{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:‘trebuchet ms’, verdana, arial;font-family:var(–mermaid-font-family)}#mermaid-svg-LNkLA9N8GJMP9QJn .node circle.state-start{fill:black;stroke:black}#mermaid-svg-LNkLA9N8GJMP9QJn .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-LNkLA9N8GJMP9QJn #statediagram-barbEnd{fill:#9370db}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-state .divider{stroke:#9370db}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-LNkLA9N8GJMP9QJn .note-edge{stroke-dasharray:5}#mermaid-svg-LNkLA9N8GJMP9QJn .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{–mermaid-font-family: ‘“trebuchet ms”, verdana, arial’;–mermaid-font-family: “Comic Sans MS”, “Comic Sans”, cursive}#mermaid-svg-LNkLA9N8GJMP9QJn .error-icon{fill:#522}#mermaid-svg-LNkLA9N8GJMP9QJn .error-text{fill:#522;stroke:#522}#mermaid-svg-LNkLA9N8GJMP9QJn .edge-thickness-normal{stroke-width:2px}#mermaid-svg-LNkLA9N8GJMP9QJn .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-LNkLA9N8GJMP9QJn .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-LNkLA9N8GJMP9QJn .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-LNkLA9N8GJMP9QJn .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-LNkLA9N8GJMP9QJn .marker{fill:#333}#mermaid-svg-LNkLA9N8GJMP9QJn .marker.cross{stroke:#333} :root { --mermaid-font-family: “trebuchet ms”, verdana, arial;} #mermaid-svg-LNkLA9N8GJMP9QJn { color: rgba(0, 0, 0, 0.75); font: ; }
操作元素
操作元素内容
innerText
innerHTML
操作常见元素属性
src href title alt等
操作表单元素属性
type value disabled等
操作元素样式属性
element.style
element.className
排他思想
两层循环,先排除其他人,然后再设置自己的样式
按钮1
按钮2
按钮3
按钮4
按钮5
案例:百度换肤效果
分析:
-
利用循环给一组元素注册点击事件
-
当鼠标经过一张图片,当前的页面背景换成经过的图片,鼠标移开之后,换回默认的
-
当点击了图片,当前的页面背景换成点击的图片
-
核心算法:把当前图片的src路径取过来,给body作为背景
案例: 表单全选取消全选
分析:
-
点击上面全选复选框,下面所有的复选框都选中(全选)
-
再次点击全选复选框,下面所有的复选框都不中选(取消全选)
-
如果下面复选框全部选中,上面全选按钮就自动选中
-
如果下面复选框有一个没有选中,上面全选按钮就不选中
-
所有复选框一开始默认都没选中状态
-
下面复选框需要全部选中,上面全选才能选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的上面全选就不选中。
Document 商品 价格 iPhone Xs Max 10000 iPad Pro 5000 iWatch 3000 AirPods 1000
操作元素
获取属性值
-
element.属性 获取内置属性值(元素自带的属性)
-
element.getAttribute(‘属性’) 主要获取自定义的属性(标准),我们定义的属性
设置属性值
-
element.属性 = ‘值’;
-
element.setAttribute(‘属性’, ‘值’) 主要更改自定义的属性
移除属性值
- element.removeAttribute(‘属性’) 主要移除自定义的属性(标准)
TAB案例 (重点)
分析:
-
一个大盒子,里面上下两个小盒子
-
上面的模块,点击某一个之后,这个的背景色是红色,其余的是灰色(排他思想)
-
点击某一个之后,显示这个模块对应的内容,其他的隐藏,这个要写到点击事件里面
-
下面的显示内容和上面的小 li 一一对应
-
核心思路:
-
给上面的tab_list 添加自定义属性,属性号从0开始
-
当点击上面的模块,下面的队形的显示模块开始显示,其他的隐藏
Document -
- 商品介绍
- 规格与包装
- 售后保障
- 商品评价(1.1万+)
- 手机社区
商品介绍模块内容
规格与包装模块内容
售后保障模块内容
商品评价模块内容
手机社区模块内容
H5自定义属性
自定义属性目的:为了保存并使用数据,有些数据保存到页面中,为不是数据库中
设置H5自定义属性
但是有些自定义属性容易引以歧义,不容易判断是内置属性还是自定义属性,所以H5给我们新增了自定义属性
H5规定自定义属性以 “data-” 开头
获取H5自定义属性
-
兼容性:element.getAttribute(‘属性’)
-
H5新增:element.dataset.index 或者 element.dataset[ ‘index’ ]
注意:
利用DOM提供的方法获取元素 (逻辑性不强,繁琐)
-
document.getElementById()
-
document.getElementByTagName()
-
document.querySelector 等等
利用 (简单、符合逻辑)
-
利用父子兄的节点关系获取元素
-
逻辑性强,但是兼容性差
节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DDITNUDY-1615818797515)(media\DOM树.png)]
页面中所有的内容(标签、属性、文本、注释等)都是节点。节点用node表示。
HTML DOM树中的所有节点均可通过JavaScript 进行访问,所有HTML节点均可被修改,也可以创建或删除。
一般的,节点至少由nodeType(节点类型)、 nodeName(节点名称)、 nodeValue(节点值)这三个基本属性。
-
元素节点 nodeType 为1
-
属性节点 nodeType 为2
-
文本节点 nodeType 为3 (文本节点包括文字、空格、换行等等)
在实际开发中,节点操作主要操作的是元素节点。
节点层级
最常见的是父子兄层级关系。
父级节点
node.parentNode
注意:得到的离元素最近的父级节点(亲爸爸),如果找不到就返回null
子级节点
parentNode.childNodes (标准)
返回包含指定节点的子节点的集合,该集合为即时更新的集合
包含的子节点包含元素节点、文本节点等等
所以用 nodeType 判断,用for循环遍历
parentNode.children (非标准)
得到所有的子元素节点,虽然是非标准的,但是得到了浏览器的支持,所以以后大量使用这个
parentNode.firstChild
返回第一个子节点,找不到返回null,不管是文本节点还是元素节点都能找到
parentNode.firstElementChild
返回第一个子元素节点,找不到返回null,只返回元素节点(IE9以上才支持)
parentNode.lastChild
返回最后一个子节点,找不到返回null,不管是文本节点还是元素节点都能找到
parentNode.lastElementChild
返回最后一个子元素节点,找不到返回null,只返回元素节点(IE9以上才支持)
实际开发中的办法:
parentNode.children[i]
案例
案例:新浪下拉菜单
分析:nav导航栏中有ul和li,li下面又有ul和li,第二层ul和li在鼠标移上去的时候才显示
-
导航栏里面的li都要有鼠标经过的效果,所以需要循环注册
-
核心原理:当鼠标经过li 的时候,孩子的ul 和li 显示,当鼠标离开,则隐藏
新浪网 -
-
-
-
-
兄弟节点
node.nextSibling 得到下一个兄弟节点,包括元素节点和文本节点
node.previousSibling 得到上一个兄弟节点,包括元素节点和文本节点
//下面两个方法只有IE9以上才能兼容
node.nextElementSibling 得到下一个兄弟元素节点,只有元素节点
node.previousElementSibling 得到上一个兄弟元素节点,只有元素节点
创建节点
document.createElement(‘tagName’)
这个方法创建由tagName指定的 HTML 元素,因为这些元素原先不存在,是根据我们的需求动态生成的,所以也称为动态创建元素节点。
node.appendChild(child);
它是追加元素,是在指定父节点的子节点的末尾添加。
node.insertBefore(child, 指定元素);
留言板案例
分析:
-
页面组成:一个文本域,一个提交按钮,一个留言板
-
当点击提交按钮的时候,先判断文本域内容是不是空,如果是空,就警告
-
如果不是空,就新建一个li,然后把文本域的内容赋值给li,然后在ul里面的前面添加li
删除节点
node.removeChild(child);
从DOM中删除一个子节点,返回删除的节点
删除留言案例
案例分析:
-
在留言板案例的基础上添加功能
-
当把文本域的内容幅值给 li 的时候,多添加一个删除的链接,
-
循环把所有的链接获取过来,当我们点击一个链接的时候,删除当前链接所在的 li
-
阻止链接跳转需要添加javascript:void(0);或者 javascript:;
复制节点(克隆节点)
node.cloneNode()
这个方法返回一个节点的副本
注意:
-
如果括号里面的参数为空,那么只是浅拷贝,即只复制节点本身,不克隆里面的子节点
-
如果括号里面的参数为true,那么是深拷贝,复制标签并且复制里面的内容
三种动态创建元素区别
-
document.write()
-
文档流执行完毕之后,他会导致页面全部重绘
-
document.innerHTML()
-
将内容写入某个DOM节点,不会导致页面全部重绘
-
拼接字符串的效率低
-
创建多个元素效率更高,(不要拼接字符串,采取数组形式拼接),结构稍显复杂
-
document.createElement()
-
创建多个元素效率稍低一点点,但是结构更清晰
总结:不同浏览器下,innerHTML比createElement效率高
文档对象模型
增
-
appendChild
-
insertBefore
删
- removeChild
改
修改DOM元素的属性,DOM元素的内容、属性、表单的值等
-
修改元素属性:src、href、title等
-
修改普通元素内容:innerHTML、innerText
-
修改表单元素:value、type、disable等
-
修改元素样式:style、className
查
-
DOM提供的API方法:getElementById、getElementByTagName古老用法不太推荐
-
H5提供的新方法:querySelecter、querySelectorAll提倡使用
-
利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)提倡使用
属性操作
-
setAttribute : 设置DOM的属性
-
getAttribute : 得到DOM的属性
-
removeAttribute : 移除属性
事件操作
| 鼠标事件 | 触发条件 |
| — | — |
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
注册事件
给元素添加事件,称为注册时间或者绑定事件。
注册事件有两种方式:传统方式和方法监听注册方式
传统注册方式
- 利用on开头的事件onclick
-
btn.onclick = function () {}
-
特点:注册事件的唯一性
-
同一个元素同一个事件著能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
监听注册方式
-
W3C标准推荐方式
-
addEventListener() 它是一个方法
-
IE9之前的IE浏览器不支持此方法,可使用attachEvent()代替
-
特点: 同一个元素同一个事件可以注册多个监听器
addEventListener() 方法
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener(type, listener[, useCapture]) 方法将指定的监听器注册到eventTarget 上,当该对象触发指定的事件时,就会执行事件处理函数。
该方法接收三个参数:
-
type : 事件类型字符串,比如click、mouseover,注意这里不要带on,是字符串,带引号
-
listener : 事件处理函数,事件发生时,会调用该监听函数
-
useCapture : 可选函数,是一个布尔值,默认是false 。学完DOM事件流之后,再进一步学习
attachEvent
该特性非标准,请尽量不要在生产环境中使用它
eventTarget.attackEvent(eventNameWithon, callback)
eventTarget.attackEvent方法将指定的监听器注册到eventTarget 上,当该对象触发指定的事件时,指定的回调函数将会被执行。
该方法接收两个参数:
-
ventNameWithon : 事件类型字符串,比如onclick,onmouseover, 这里要带on
-
callback : 事件处理函数,当目标触发事件时回调函数将被调用
注册事件的兼容性解决方案
点击我
删除事件的方式
- 传统注册方式
eventTarget.onclick = null;
- 方法监听注册方式
divs[1].addEventListener(‘click’, alertWarn);
function alertWarn () {
alert(‘warning’);
divs[1].removeEventListener(‘click’, alertWarn);
}
- attach 方式
divs[2].attachEvent(‘onclick’, alertWarn1);
function alertWarn1 () {
alert(‘warning’);
divs[1].detachEvent(‘click’, alertWarn1);
}
- 兼容性方案
参考上面的注册事件的兼容性方式。
事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
包括三个阶段:
-
事件捕获阶段
-
处于目标阶段
-
事件冒泡阶段
注意:
-
JS代码只能执行捕获或者冒泡其中的一个阶段
-
onclick 和 attachEvent 只能得到冒泡阶段
-
addEventListener (type, listener[, useCapture]) 第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示在事件冒泡阶段电泳事件处理程序。
-
在实际开发中,我们很少使用事件捕获,我们更关注事件冒泡
-
有些事件是没有冒泡的,比如onblur、onfocus、onmouseover、onmouseleave
-
虽然事件冒泡有时候会带来麻烦,但是有时候又会巧妙的做某些事情.
-
event 就是一个事件对象,写道我们的侦听函数的小括号里面,当形参来看
-
事件对象只有有了事件才会存在,他是系统给我们自动创建的,不需要我们传递参数
-
事件对象是我们的事件的一系列相关数据的集合,比如鼠标点击里面就包含了鼠标的相关信息
-
这个事件对象我们可以自己命名,比如 event、evt 、e 等
-
事件对象也有兼容性问题。 IE 6、7、8通过 window.event 实现
兼容性写法:
event = event || windoe.event;
事件对象常见的额属性和方法
| 事件对象属性方法 | 说明 |
| — | — |
| e.target | 返回触发事件的对象 标准 |
| e.scrElement | 返回触发事件的对象 非标准 IE 6 7 8 使用 |
| e.type | 返回事件的类型,比如click、mouseover等,不带 on |
| e.cancelBubble | 该属性阻止冒泡,非标准,IE 6 7 8 使用 |
| e.returnValue | 该属性阻止默认事件(默认行为)非标准 ,IE 6 7 8 使用,比如不让链接跳转 |
| e.preventDefaule() | 该方法阻止默认事件(默认行为)标准 ,比如不让链接跳转 |
| e.stopPropagation() | 阻止冒泡,标准 |
e.target 和 this 的区别
this 返回的是绑定事件的对象(元素)
e.target 返回的是点击的那个对象,就是谁触发了这个事件
var ul = document.querySelector(‘ul’);
ul.addEventListener(‘click’, function (e) {
console.log(this);
console.log(e.target);
})
//
- …
//
-
- 123
-
阻止对象默认行为
三种方法:
- e.preventDefaule();
是一个方法,适合普通浏览器
-
e.returnValue;
-
是一个属性,适用于 IE 6 7 8
-
return false;
没有兼容性问题,但是需要注意后面的语句就不执行了,直接跳出
阻止冒泡
-
event.stopPropagation(); // 一般浏览器停止冒泡
-
event.cancelBubble; // IE 6 7 8 的停止冒泡
var father = document.querySelector(‘.father’);
var son = document.querySelector(‘.son’);
father.addEventListener(‘click’, alertName, false);
son.addEventListener(‘click’, alertName, false);
document.addEventListener(‘click’,function () {
alert(‘document’);
}, false);
function alertName (event) {
alert(this.getAttribute(“class”));
event.stopPropagation(); // 停止冒泡
event.cancelBubble; // IE 6 7 8 的停止冒泡
}
事件委托的原理
事件委托的原理:不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点。
例如: 给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li ,然后事件冒泡到 ul 上, ul 有注册事件,就会触发事件监听器。
事件委托的作用
只操作了一次 DOM ,提高了程序的性能。
| 鼠标事件 | 触发条件 |
| — | — |
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
document.addEventListener(‘click’, function (e) {
console.log(e);
});
| 鼠标事件对象 | 说明 |
| — | — |
| e.clientX | 返回鼠标相对于浏览器窗口可视区域的X坐标 |
| e.clientY | 返回鼠标相对于浏览器窗口可视区域的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+ 支持 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+ 支持 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
案例:
跟随鼠标的小鸟:
案例分析
-
鼠标不断的移动,使用鼠标移动事件: mousemove
-
在页面中移动,所以给 document 注册事件
-
图片要移动距离,而且不占位置,我们使用绝对定位即可
-
核心原理,每次鼠标移动,我们都会获得最新的鼠标坐标,把这个 X 和 Y 的坐标做为图片的 top 和 left 值就可以移动图片
跟随鼠标的小鸟
常用键盘事件
| 键盘事件 | 触发条件 |
| — | — |
| onkeyup | 某个键盘按键被松开时触发(松开的时候触发) |
| onkeydown | 某个键盘按键被按下时触发(按下之后一直触发) |
| onkeypress | 某个键盘按键被按下时触发(按下之后一直触发),但是它不能识别功能键,比如 ctrl、shift 等 |
当按下的时候,keydown 执行在 keypress 之前。
| 键盘事件对象属性 | 说明 |
| — | — |
| keyCode | 返回该键的 ASCII 值 |
注意:
-
keyup 和 keydown 事件不区分字母大小写, a 和 A 得到的都是65
-
keypress 区分大小写,a 得到的是97,A 得到的是 65
案例1:
京东按下 s 键定位到搜索框:
检测用户是否按下了 s 键盘,如果按下 s 键,就把光标定位到搜索框里面。
案例分析
-
利用键盘事件对象里面的 keyCode 判断用户是否按下的是 s 键
-
搜索框获得焦点的方法: 利用 js 里面的 focus() 方法
京东搜索框
常用键盘事件
| 键盘事件 | 触发条件 |
| — | — |
| onkeyup | 某个键盘按键被松开时触发(松开的时候触发) |
| onkeydown | 某个键盘按键被按下时触发(按下之后一直触发) |
| onkeypress | 某个键盘按键被按下时触发(按下之后一直触发),但是它不能识别功能键,比如 ctrl、shift 等 |
当按下的时候,keydown 执行在 keypress 之前。
| 键盘事件对象属性 | 说明 |
| — | — |
| keyCode | 返回该键的 ASCII 值 |
注意:
-
keyup 和 keydown 事件不区分字母大小写, a 和 A 得到的都是65
-
keypress 区分大小写,a 得到的是97,A 得到的是 65
案例1:
京东按下 s 键定位到搜索框:
检测用户是否按下了 s 键盘,如果按下 s 键,就把光标定位到搜索框里面。
案例分析
-
利用键盘事件对象里面的 keyCode 判断用户是否按下的是 s 键
-
搜索框获得焦点的方法: 利用 js 里面的 focus() 方法
京东搜索框