- 排他思想:如果有一组元素,想要某个元素实现某种样式,需要用到循环的排他思想算法 (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()创建多个元素效率稍低一点点,但结构更清晰
DOM(2)
最新推荐文章于 2024-08-16 22:57:43 发布