DOM基础知识点

DOM:document object model 文档对象模型

DOM获取元素的方法

1、document.getElementById('id') //通过id得到元素
2、document.getElementsByTagName('el') //通过标签名获取一组元素  获取的是一个对象数据类型结果，并且是一个类数组(以数字作为索引,索引从0开始,逐级递增,索引代表的是当前对应的某一个元素,有一个叫做length的属性代表获取的个数)
3、document.getElementsByName('name') //通过元素name属性的值获取一组元素
4、document.getElementsByClassName('className') //通过类名获取一组元素
获取多个的这几个方法，即使你获取的只有一个，它也是类数组，也是一个集合，如果想用其中的第一个，也要通过索引拿出来用 list[0]

5、 document.documentElement //获取HTML元素
    document.body //获取body元素
6、在移动端我们获取元素常用的方法
document.querySelector()  获取一个
document.querySelectorAll() 获取多个

兼容所有浏览器的获取当前屏幕的宽度

let curWidth = document.documentElement.clientWidth || document.body.clientWidth;//兼容所有浏览器的获取当前屏幕的宽度
let curHeight = document.documentElement.clientHeight || document.body.clientHeight;

DOM关系属性

● childNodes:获取所有的子节点

● children:获取所有的元素子节点

● parentNode:获取父亲节点

● previousSibling:获取上一个兄弟节点(哥哥)

● nextSibling:获取下一个兄弟节点(弟弟)

● firstChild:获取所有节点中的第一个

● lastChild:获取所有节点中的最后一个

let box = document.getElementById('box');
    console.log(box.childNodes)  //获取所有子节点
    console.log(box.children)  //获取所有的元素子节点
    console.log(box.parentNode)  //获取父亲节点
    console.log(box.previousSibling)  //获取上一个兄弟节点(哥哥)
    console.log(box.nextSibling)  //获取下一个兄弟节点(弟弟)
    console.log(box.firstChild)  //获取下一个兄弟节点(弟弟)
    console.log(box.lastChild)  //获取下一个兄弟节点(弟弟


/** 
 * 节点类型:
 *                         nodeType         nodeName                  nodeValue
 * 元素节点(元素标签)           1            大写的标签名                   null
 * 文本节点(文字)               3               #text                    文字内容
 * 注释节点(注释)               8               #comment                 注释内容
 * document                    9               #document                  null
 */
// 在标准浏览器下，我们把space(空格)和Enter(回车)都当做文本节点处理


//模拟children方法,实现获取指定元素的元素子节点
function getMyChildren(ele,tagName){
    let ary = [] , nodes = ele.childNodes
    for(let i = 0; i < nodes.length; i++){
        let cur = nodes[i]
        if(cur.nodeType === 1){
            if(tagName){
               
                if(cur.nodeName.toLowerCase() === tagName.toLowerCase()){
                    ary.push(cur)                    
                }
            }else{
                ary.push(cur)
            }
        }
    }
    return ary 
}

   let box = document.getElementById('box');

   console.log(box)
   let arr = getMyChildren(box,'ul')
   console.log(arr)

封装节点操作方法

// 获取上一个节点
function prev(ele){
    let pre = ele.previousSibling
    while(pre && pre.nodeType !== 1){
        pre = pre.previousSibling
    }
    return pre
}
// 获取前面所有的节点
function prevAll(ele){
    let pre = ele.previousSibling
    let newPre = []
    while(pre){
        if(pre.nodeType === 1){
            newPre.unshift(pre)
        }
        pre = pre.previousSibling
    }
    return newPre
}

    
// 获取下一个节点
function next(ele){
    let nex = ele.nextSibling

    while(nex && nex.nodeType !== 1){
        nex = nex.nextSibling
    }
    return nex
}



// 获取下面所有的节点
function nextAll(ele){
    let nex = ele.nextSibling
    let newNex = []

    while(nex){
        if(nex.nodeType === 1){
            newNex.push(nex)
        }
        nex = nex.nextSibling
    }
    return newNex
}

//获取上下所有的子节点

function preAndNextAll(ele){
    let pre = prevAll(ele)
    let nex = nextAll(ele)
    return pre.concat(ele,nex)
}

//获取相邻的两个节点

function preAndNex(ele){
    let pre = prev(ele)
    let nex = next(ele)
    return [pre,ele,nex]
}

let li2 = document.getElementById('li3')
// console.log(prev(li2))

console.log(preAndNex(li2))

DOM元素的创建、插入、删除、克隆和替换

    //  动态创建一个元素标签  document.createElement()
    //  appendChild：把这个元素添加到指定的容器末尾位置 容器.appendChild(元素)
    //  insertBefore：把新的元素newEle添加到老的元素oldEle之前
    //  oldEle.parentNode.insertBefore(newEle,oldEle)
    let odiv = document.createElement('div')
    
    odiv.id = 'odiv'
    odiv.style.width = '200px'
    odiv.style.height = '200px'
    odiv.style.background = 'pink'
    document.body.appendChild(odiv) //把div添加到body里去

    let oh3 = document.createElement('h3')
    oh3.id = 'oh3'
    oh3.innerText = '我是h3'
    // document.body.insertBefore(oh3,odiv)
    //或者这样写
    odiv.parentNode.insertBefore(oh3,odiv)
    
    // 删除元素
    // removeChild()
    odiv.parentNode.removeChild(odiv)    //找到自己的父节点然后把自己删除
    
    //克隆元素 
    //cloneNode(boolean)
    let clo = oh3.cloneNode(true) //克隆一份元素  true:把元素里面的子子孙孙都克隆，默认都是false，只克隆当前的
    clo.style.color = 'red'
    document.body.appendChild(clo)


    //替换元素
    //replaceChild：replaceChild(要上DOM的值,要下DOM的)
    let oh1 = document.createElement('h1')
    oh1.id = 'oh1'
    oh1.innerText = '我是h1'

    document.body.replaceChild(oh1,oh3) //替换

DOM设置自定义属性

    let odiv = document.createElement('div')
    odiv.style.width = '200px'
    odiv.style.height = '200px'
    odiv.style.background = 'pink'
    document.body.appendChild(odiv)

	//增加自定义属性
    //1、把odiv看作一个对象数据类型，在它开辟的空间中增加一个属性名:'xiaohong' 类似于: let obj = {}; obj.name = '123

   odiv.name = 'xiaohong'
// odiv["name"] = 'xiaohong'
    //console.log(odid.name)


    // setAttribute: 设置元素的属性(包含自定义属性)
    // getAttribute: 用setAttribute设置的,就必须要用 getAttribute获取,其他的获取不到
    // removeAttribute: 删除属性
    // 修改html元素的结构(使用这个方法在html上可以体现出来)
    odiv.setAttribute('name','xiaohong')
    console.log(odiv.getAttribute('name'))
    odiv.removeAttribute('name')
    //在IE6~8下这个方法不能修改class属性 odiv.setAttribute('class','ccc'),是不起作用的
    // 最好用这种办法写class  odiv.className = 'ccc'