day22
一、DOM
+ 文档对象模型 + 在DOM的世界里面,把所有的标记称之为节点,把标记的结构称之为DOM树 + 告诉咱们标记在文档里面是以树形结构存在的 + 节点分类 => document 文档节点 => eLement 标记节点 => attribute 属性节点 => comment 注释节点 => text 文本节点
二、访问节点
nodeName节点名称 nodeType节点类型(返回的时数字) nodeValue节点值(不是所有的节点都有值) firstChild访问第一个节点(包含所有的节点类型) childNodes 访问所有的节点(返回的伪数组)标记节点名称返回的是大写字母的标记名 lastChild访问最后一个节点 box.firstElementChild访问元素节点 box.children[1].previousElementSibling访问上一个兄弟节点 box.children[1].nextElementSibling访问下一个兄弟节点
三、属性节点操作
// setAttitude('属性名', '属性值') 设置属性 // 注意点:如果这个标记本身就有的属性可以直接使用,如果没有的话那么必须要使用style形式来设置 pic.setAttribute('src', 'https://tse2-mm.cn.bing.net/th/id/OIP-C.FzD9xtNlBMhuxx-XRgqvrgAAAA?w=190&h=286&c=7&r=0&o=5&dpr=2&pid=1.7') pic.setAttribute('width', '200') pic.setAttribute('style', 'border:1px solid red;') div.setAttribute('class', 'box') // getAttitude('属性名') 获取属性值 // console.log(div.getAttribute('class')) // box // getAttitudeNode('属性名') 获取属性 // console.log(div.getAttributeNode('class')) // class="box" // console.log(div.getAttributeNode('class').nodeValue) // box // removeAttitude('属性名') 删除属性 // div.removeAttribute('class') console.log(div.getAttributeNode('class').nodeName) console.log(div.getAttributeNode('class').nodeType) console.log(div.getAttributeNode('class').nodeValue) // 判断你拿到是不是一个属性,可以使用nodeType console.log(div.getAttributeNode('class').nodeType === 2) // true
四、元素节点操作
// 创建标记节点 var p = document.createElement('p') p.innerHTML = 'hello,我是新来的' var span = document.createElement('span') span.innerHTML = '我是张' var b = document.createElement('b') b.innerHTML = '最近长胖了' // 追加新建元素到页面 document.body.appendChild(p) document.body.appendChild(span) // 把创建标记追加到已有标记的前面 // 参数1表示新创建的标记 // 参数2表示放在那个已有标记的前面 // document.body.insertBefore(b, p) var h1 = document.querySelector('h1') // document.body.insertBefore(b, h1) // 删除标记节点 // b.remove() // document.body.removeChild(b) // 克隆(复制)标记节点 // 参数可以写一个true,true表示深克隆(把标记的内容和子标记都可以复杂),不写默认是浅克隆(只克隆标记) // var cloneB = b.cloneNode() // var cloneB = b.cloneNode(true) // console.log(cloneB) // 替换标记节点 // 参数1表示要替换成那个节点 // 参数2表示被替换的节点 // document.body.replaceChild(p, b) // 获取父元素 // 注意点:元素节点的父节点只能是元素类型,而不能是其他的节点类型。因此下面只有语义上的区分,效果是一样的 // parentNode 表示获取父元素节点,但是它包含所有节点类型 console.log(h1.parentNode.parentNode) // parentELement 表示获取父元素节点,但是它只包含元素节点 console.log(h1.parentElement.parentElement)