WebApi--DOM动态操作

思维导图

 查

1.查元素
    满足条件第一个： document.querySelector('选择器')
        返回dom对象，可以直接操作修改
    满足条件所有： document.querySelectorAll('选择器')
        返回伪数组 [ dom对象1,dom对象2 ]，不能直接修改，需要通过下标取出DOM对象才可以操作

2.查内容
    操作文本： innerText
        设置的时候：无法解析字符换串中的标签
    操作文本+标签： innerHTML
        设置的时候：可以解析字符换串中的标签

3.查属性
    普通元素
        href : a标签链接
        src : img标签路径
    表单元素
        value : 表单值
        disabled : 是否禁用
        checked: 是否选中(radio  checkbox)            
        selected: 是否选中(下拉菜单option标签)
4.查样式
    元素.style.样式
        修改单个样式
    元素.className
    元素.classList
        元素.classList.add('类名')
        元素.classList.remove('类名')
        元素.classList.toggle('类名')
            切换： 有则移除，无则添加    

5.查节点
    子元素节点
        父元素.children
    兄弟元素节点
        上一个兄弟元素
            元素.previousElementSibling
        下一个兄弟元素
            元素.nextElementSibling
    父元素节点
        元素.parentNode    

新增节点

语法：新增节点:document.createElement(标签名）

• 创建空标签（目前在内存里面）

• 添加内容：元素.innerText='文本‘；或者 元素.innerHTML='文本‘

• 添加到dom对象里面 ：

  • 添加到父元素最后面；父元素.appendChild(子元素）

  • 新增到某个元素前面 ；父元素.inseBefore(子元素，需要加到的子元素前面）

    • 添加到父元素的第一个位置：父元素.inseBefore(子元素，父元素.children[0])

删除节点

• 父元素.removechild(子元素）--元素只能移除自己的子元素

• 元素.remove() 移除自身的操作

克隆节点

• 元素自己 ：元素.cloneNode(false}

• 元素自己和后代：元素.cloneNode(true)