罗旭20221209 - 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

data-属性名="自定义属性的值"键值对的方式来描述HTML 标签的扩展属性

标准属性---标签自带的一些属性，内置的

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.属性名;---自定义属性删除

排他思想是为了一组同类型元素中的某一个元素设置样式是采用的一种特定顺序

优势：适用于多个同类型元素设置样式或者效果的情况，避免了单个元素重复设置相同样式，可以有效地显示出用户操作下某一元素的改变

步骤：1.为全部元素设置一般效果2.为特定元素设置特定效果

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---自己本身的上一个兄弟节点

往后面追加父节点.appendChild('子节点');插入到指定节点的前面父节点.insertBefore('要插入的节点'，目标节点)