|
1.自定义属性的用法 1.1自定义属性概述 data-属性名="自定义属性的值"键值对的方式来描述HTML 标签的扩展属性 标准属性---标签自带的一些属性，内置的 1.2自定义属性的操作 H4自定义属性的操作语法：<div id="box" class="box" style="height:200px" age="23" sex="男">鲨鱼辣椒</div> H4获取标签的自定义属性节点.getAttribute('自定义属性')---获取自定义属性的值H4获取标签的标准属性节点.内置属性名 节点.setAttribute('自定义属性',修改的值)---修改自定义属性节点.setAttribute('自定义属性','新增的值')---新增自定义属性节点.removeAttribute('自定义属性')---删除自定义属性 H5自定义属性的操作语法：<div id="box" class="class" data-set="男" data-age="34" data-name="袁华">力拔山兮气盖世</div> box.dataset.属性名 = 属性值;---自定义属性新增box.dataset.属性名 = 属性值;---自定义属性修改delete box.dataset.属性名;---自定义属性删除 2.排他思想 排他思想是为了一组同类型元素中的某一个元素设置样式是采用的一种特定顺序 优势：适用于多个同类型元素设置样式或者效果的情况，避免了单个元素重复设置相同样式，可以有效地显示出用户操作下某一元素的改变 步骤：1.为全部元素设置一般效果2.为特定元素设置特定效果 3.节点操作 3.1子找父，父找子 html文档中每一个成员都是一个节点对象，节点对象具有自己的属性和方法 1.html节点let html = document.documentElement;html.clientHeight---高度--浏览器整个窗口的高度 2.body节点let body = document.body;body.clientHeight---内容实际高度 子节点找父节点---parentNodeclosest---向上查找--一层一层网上查找，如果找到就停止下来，找不到null找的离自己最近的父级节点 父节点找子节点---空格，回车也会被获取到列表中的第一个节点---firstChild列表中的最后一个节点---lastChild所有的子节点---childNodes 获取到的是元素节点---标签节点---不受空格回车的影响firstElementChild---列表中的第一个节点 节点.children[0]lastElementChild---列表中的最后一个节点 节点.children[节点.children.length - 1]children---所有的子节点 兄弟节点nextElementSibling---自己本身的下一个兄弟节点previousElementSibling---自己本身的上一个兄弟节点 3.2新增节点 创建节点document.createElement('tagName') 往后面追加父节点.appendChild('子节点');插入到指定节点的前面父节点.insertBefore('要插入的节点'，目标节点) 3.3删除节点 removeChild(要删除的子节点) 二、今日问题 无
无
| 
