关于HarmonyOS的学习

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)