DOM（2）
网友:do
文章列表
2024-03-21 22:24:49
- 排他思想：如果有一组元素，想要某个元素实现某种样式，需要用到循环的排他思想算法 （1）所有元素全部清除样式 （2）给当前元素设置样式（顺序不能颠倒）
- 自定义属性的操作： （1）获取属性值： ①element.属性：获取内置属性值（元素本身自带的属性） ②element.getAttribute('属性')：主要获得自定义的属性 （2）设置属性值： ①element.属性='值'：设置内置属性值 ②element.setAttribute('属性','值')： 设置自定义的属性值 （3）移除属性： ①element.removeAttribute('属性')
- 自定义属性的目的：为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
- H5新增自定义属性（判断是内置属性还是自定义属性）： （1）设置H5自定义属性：H5自定义属性data-开头作为属性名并且赋值，例：<div data-index="1"></div>或通过JS设置：element.setAttribute('data-index',2) （2）获取H5自定义属性：①兼容性获得 element.getAttribute('data-index') ②H5新增element.dataset.index或element.dataset['index'] ③ 如果自定义属性里面有多个-链接的单词 获取时采取驼峰命名法
- 获取元素的两种方法：①利用DOM提供的方法获取元素，②利用节点层级关系获取元素（利用父子兄节点关系获取元素）
- 节点基本属性：nodeType（节点类型）、nodeValue（节点名称）和nodeName（节点名称）
- 节点类型nodeType:①元素节点 nodeType为1 ②属性节点 nodeType为2 ③文本节点 nodeType为3（文本节点包含文字、空格、换行） 注：实际开发中，节点操作主要操作的是元素节点
- 节点层级：利用DOM树将节点划分为不同层级关系，常见的是父子兄层级关系 （1）父级节点：node.parentNode （返回最近的一个父节点，如果指定的节点没有父元素则返回null） （2）子节点：①parentNode.childNodes （标准） 注：返回值里面包含所有子节点，包括元素节点、文本节点，想要只获取元素节点，需专门处理，不提倡使用childNodes ②parentNode.children（非标准）：是一个只读属性，返回所有的子元素节点。只返回子元素节点，其余节点不返回 ③parentNode.firstChild（返回第一个子节点，找不到则返回null，同样，也是包含所有的节点） ④parentNode.lastChild ⑤parentNode.firstElementChild ⑥parentNode.lastElementChild （3）兄弟节点：①node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null，同样包含所有节点 ②node.previousSibling：返回当前元素的上一个兄弟节点 ③node.nextElementSibling：返回当前元素下一个兄弟元素节点，找不到返回null ④node.previousElementSibling：
- （1）创建节点：document.createElement('tagName')（创建由tagName指定的HTML元素，因为原先不存在，称为动态创建元素节点） （2）添加节点：①node.appendChild(child)（将一个节点添加到指定父节点列表末尾 ②node.insertBefore(child,指定元素)（将一个节点添加到父节点的指定子节点前面 （3）删除节点：node.removeChild(child)：（从DOM中删除一个子节点，返回删除节点）
- 阻止链接跳转：阻止链接跳转需要添加javascript:void(0);或者javascript:;
- 复制节点（克隆节点）：node.cloneNode() （返回该方法的节点的一个副本，也称克隆节点/拷贝节点 注：①如果括号参数为空或者false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点 ②如果括号里面是true，则是拷贝，复制标签和内容
- 三种动态创建元素区别： （1）document.write() ：直接将内容写入页面的内容流，但文档流执行完毕，则它会导致页面全部重绘 （2）innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 （3）innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂 （4）createElement()创建多个元素效率稍低一点点，但结构更清晰
