一.今日学习
1.自定义属性的用法
data-属性名 = "自定义属性的值"
键值对的方式来描述HTML 标签的扩展属性
标准属性--标签自带的一些属性，内置的
2.自定义属性的操作
H4:
dom.getAttribute('属性名')---获取自定义属性的值
dom.setAttribute('属性名','属性的值')---修改/新增自定义属性的值
dom.removeAttribute('属性名')---移除自定义属性
H5：
标签上 data-属性名="属性值"
js获取或者设置
获取：dom.dataset.属性名
修改/新增：dom.dataset.属性名=属性值
3.排他思想
排他思想是为一组同类型元素中的某一个元素设置样式时，采用的一种特定顺序
优势：适用于多个同类型元素设置样式或者效果的情况，避免为单个元素重复设置相同样式，可以有效显示出用户操作下某一元素的改变
步骤：
1.为全部元素设置一般效果
2.为特定元素设置特定效果
节点操作：
3.1 子找父，父找子
html文档中每一个成员都是一个节点对象，节点对象具有自己的属性和方法
1.html节点
document.documentElement
2.body节点
document.body
整个窗口的高度
document.documentElement.clientHeight
内容的高度
document.body.clientHeight
父节点---parentNode
// 会受到回车，空格的影响，有可能获取到文本节点
列表中的第一个节点----firstChild
列表中的最后一个节点----lastChild
所有的子节点的列表----childNodes
// 不会收到回车空格的影响，获取到的是元素节点，标签节点
列表中的第一个元素节点---firstElementChild
列表中的最后一个元素节点---lastElementChild
列表中的所有元素节点---children
// 向上查找：找到离得最近的父级节点
closest('选择器')
兄弟节点
nextElementSibling---下一个兄弟元素节点
previousElementSibling---上一个兄弟元素节点
新增节点
创建节点
document.createElement('tagName');
插入节点
父节点.appendChild('子节点')
父节点.insertBefore('要插入的节点',目标节点)
删除节点：removeChild(要删除的子节点);
二、今日问题：无
三、解决方案：无 |
|