DOM学习笔记(一) 淡淡的烟草味﹌ 2022-02-14 09:39 155阅读 0赞 ## DOM获取元素 ## **getElementById()** * id重复了会获取第一个 * 在IE6~7中会把name当作id使用 * 上下文只能是document **getElementsByName()** * 在IE浏览器中只对表单元素的name起作用 **getElementsByClassName()** * IE6~8中不兼容 **getElementsByTagName()** * 获取当前上下文中,所有子子孙孙中标签名是xxx的元素 **querySelector()** **querySelectorAll()** * 不兼容IE6~8 * 没有DOM映射 **document.body** **document.head** **document.documentElement** **…** ## 表述节点与节点之间关系的属性 ## <table> <thead> <tr> <th></th> <th>nodeType</th> <th>nodeName</th> <th>nodeValue</th> </tr> </thead> <tbody> <tr> <td>元素节点</td> <td>1</td> <td>大写标签名</td> <td>null</td> </tr> <tr> <td>文本节点</td> <td>2</td> <td>#text</td> <td>文本注释</td> </tr> <tr> <td>注释节点</td> <td>3</td> <td>#comment</td> <td>注释内容</td> </tr> <tr> <td>文档节点</td> <td>4</td> <td>#document</td> <td>null</td> </tr> </tbody> </table> **childNodes**: 所有子元素 **children**:所有元素子节点(IE6~8中会把注释当作元素节点) **parentNode**: 父节点 **previousSibling**: 当前节点的哥哥节点 **previousElementSibling**:当前元素的哥哥元素节点 **nextSibling/nextElementSibling**:当前元素下一个节点/元素节点 **firstChild/lastChild**:读取第一个/最后一个子节点,若无返回null ## 动态操作DOM ## **createElement()**:创建元素 **createDocumentFragment()**:创建文档碎片 **appendChild**:追加元素 **insertBefore()**:插入节点 **cloneNode(true)**:true深克隆,false浅克隆 **removeChild**:移除节点 **set/get/removeAttribute**:操作自定义元素 **xxx.style.xxx=xxx**:设置样式 **xxx.style.xxx=xxx**:获取样式 **xxx.className=‘xxx’**:设置类 **xxx.οnclick=function()\{\}** :注册事件
还没有评论,来说两句吧...