原生js的DOM操作

原生js的DOM操作

<div class="layout" id="layout">
    <div id="item1" class="item1">1</div>
    <div id="item2" class="item2">2</div>
    <div class="item1">3</div>
    <input type="text" name="input">
</div>

创建元素

document.createElement('div')

document.createTextNode('创建文本节点')

document.createDocumentFragment()

获取元素：

document.getElementById('layout');//根据id获取

document.etElementsByClass('layout'); // 根据类名获取

document.getElementsByTagName(); // 根据标签名获取

document.getElementsByName('input');(只有含有name属性的元素(表单元素)才能通过name属性获取)

document.querySelector('.item1'); //根据选择器获取

document.querySelectorAll('.item1');

document.documentElement; // 获取html标签

document.body; // 获取body标签

操作元素：

    const parentNode = document.getElementById('layout')
    const createNode = document.createElement('div')
    createNode.innerHTML = '创建新节点'
    const oldNode =  document.querySelector('.item1')

parentNode.appendChild(createNode)

parentNode.insertBefore(createNode，oldNode)

parentNode.removeChild(oldNode)

parentNode.replaceChild(createNode，oldNode)

document.getElementById('item1').cloneNode(Boolean) // 克隆所有后代，请把 Boolean 参数设置 true，否则设置为 false。

document.getElementById('item1').innerHtml = '创建新节点'

document.getElementById('item1').innerText = '创建新节点'

获取节点

oldNode.previousSibling // 上一个 兄弟节点

oldNode.nextSibling //下一个 兄弟节点

oldNode.parentNode // 父节点

parentNode.childNode

parentNode.children

parentNode.firstChild

parentNode.lastChild

属性

oldNode.getAttribute('class')

oldNode.setAttribute('class','new-class')

oldNode.removeAttribute('class')

oldNode.hasAttribute('class')

class

oldNode.classList.add("class1", "class2", "class3"); ---- 添加类名，如果有则不添加

oldNode.setAttribute("class",getAttribute("class").concat(' class4')) ---- 添加类名

oldNode.classList.remove("class1"); ---- 从列表中删除类名

oldNode.setAttribute("class",getAttribute("class").replace(oldClase,'')) ---- 从列表中删除类名

oldNode.classList.toggle('class1') ---- 切换类名：如果列表中存在则删除，否则添加

oldNode.classList.contains('class1') ---- 判断是否存在类名，返回Boolean值