一.什么是DOM节点DOM树里每一个内容都称之为节点DOM节点的分类元素节点比如div标签属性节点比如class属性文本节点比如标签里面的文字二.查找、增加、删除节点1.查找节点父节点查找parentNode属性返回最近一级的父节点找不到返回为null子元素.parentNodebody div classdad div classson/div /div script const son document.querySelector(.son); console.log(son); console.log(son.parentNode); /script /body子节点查找childNodes获得所有子节点、包括文本节点(空格、换行)、注释节点等children属性仅获得所有元素节点返回的还是一个伪数组父元素.childrenbody ul li/li li/li li/li /ul script const ul document.querySelector(ul); console.log(ul.children); /script /body兄弟关系查找:下一个兄弟节点nextElementSibling属性上一个兄弟节点previousElementSibling属性body ul li哈哈/li li/li li嘻嘻/li li/li li/li /ul script const li2 document.querySelector(li:nth-child(2)); console.log(li2.nextElementSibling); // 下一个兄弟元素 console.log(li2.previousElementSibling); // 上一个兄弟元素 /script /body2.增加节点和追加节点document.createElement(标签名)body script const div document.createElement(div); console.log(div); /script /body插入到父元素的最后一个子元素父元素.appendchild(要插入的元素)body ul/ul script const ul document.querySelector(ul); const li document.createElement(li); li.innerHTML 我是新增的li; ul.appendChild(li); /script /body插入到父元素中某个子元素的前面父元素.insertBefore(要插入的元素在哪个元素前面)body ul li哈哈哈哈/li /ul script const ul document.querySelector(ul); const li document.createElement(li); li.innerHTML 我是新增到第一个前边的li; ul.insertBefore(li, ul.children[0]); /script /body3.克隆节点元素.cloneNode(布尔值)body ul li1/li li2/li li3/li /ul script const ul document.querySelector(ul); const li1 ul.children[0].cloneNode(true); ul.appendChild(li1); /script /body4.删除节点若一个节点在页面中已不需要时可以删除它在JavaScript原生DOM操作中要删除元素必须通过父元素删除父元素.removeChild(要删除的元素)body ul li/li /ul script const ul document.querySelector(ul); ul.removeChild(ul.children[0]); /script /body如不存在父子关系则删除不成功删除节点和隐藏节点(display:none)有区别的:隐藏节点还是存在的但是删除则从html中删除节点三.M端事件移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件)Android和I0S都有。touch对象代表一个触摸点。触摸点可能是一根手指也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:触屏touch事件 说明touchstart 手指触摸到一个DOM元素时触发touchmove 手指在一个DOM元素上滑动时触发touchend 手指从一个DOM元素上移开时触发
一.什么是DOM节点DOM树里每一个内容都称之为节点DOM节点的分类元素节点比如div标签属性节点比如class属性文本节点比如标签里面的文字二.查找、增加、删除节点1.查找节点父节点查找parentNode属性返回最近一级的父节点找不到返回为null子元素.parentNodebody div classdad div classson/div /div script const son document.querySelector(.son); console.log(son); console.log(son.parentNode); /script /body子节点查找childNodes获得所有子节点、包括文本节点(空格、换行)、注释节点等children属性仅获得所有元素节点返回的还是一个伪数组父元素.childrenbody ul li/li li/li li/li /ul script const ul document.querySelector(ul); console.log(ul.children); /script /body兄弟关系查找:下一个兄弟节点nextElementSibling属性上一个兄弟节点previousElementSibling属性body ul li哈哈/li li/li li嘻嘻/li li/li li/li /ul script const li2 document.querySelector(li:nth-child(2)); console.log(li2.nextElementSibling); // 下一个兄弟元素 console.log(li2.previousElementSibling); // 上一个兄弟元素 /script /body2.增加节点和追加节点document.createElement(标签名)body script const div document.createElement(div); console.log(div); /script /body插入到父元素的最后一个子元素父元素.appendchild(要插入的元素)body ul/ul script const ul document.querySelector(ul); const li document.createElement(li); li.innerHTML 我是新增的li; ul.appendChild(li); /script /body插入到父元素中某个子元素的前面父元素.insertBefore(要插入的元素在哪个元素前面)body ul li哈哈哈哈/li /ul script const ul document.querySelector(ul); const li document.createElement(li); li.innerHTML 我是新增到第一个前边的li; ul.insertBefore(li, ul.children[0]); /script /body3.克隆节点元素.cloneNode(布尔值)body ul li1/li li2/li li3/li /ul script const ul document.querySelector(ul); const li1 ul.children[0].cloneNode(true); ul.appendChild(li1); /script /body4.删除节点若一个节点在页面中已不需要时可以删除它在JavaScript原生DOM操作中要删除元素必须通过父元素删除父元素.removeChild(要删除的元素)body ul li/li /ul script const ul document.querySelector(ul); ul.removeChild(ul.children[0]); /script /body如不存在父子关系则删除不成功删除节点和隐藏节点(display:none)有区别的:隐藏节点还是存在的但是删除则从html中删除节点三.M端事件移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件)Android和I0S都有。touch对象代表一个触摸点。触摸点可能是一根手指也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:触屏touch事件 说明touchstart 手指触摸到一个DOM元素时触发touchmove 手指在一个DOM元素上滑动时触发touchend 手指从一个DOM元素上移开时触发
