DOM操作

Posted 2021-01-20 longhua-0

// 获取元素
    document.getElementById(‘id‘); elem.getElementsByTagName(‘tag‘); document.getElementsByName(‘name‘); // html5新增
    elem.getElementsByClassName(‘class‘); // 获取属性
    elem.getAttribute(‘attr‘); // 设置属性
    elem.setAttribute(‘attr‘, value); // 移除属性
    elem.removeAttribute(‘attr‘); // 子节点列表 childNodes有浏览器兼容问题，需要对节点类型进行判断，推荐用children
element.childNodes; // nodeType属性 node.nodeType 1：元素节点 2：属性节点 3：文本节点
    // nodeValue属性 node.nodeValue
    // firstChild和lastChild
    node.firstChild==node.childNodes[0] ; node.lastChild==node.childNodes[node.childNodes.length - 1] ; // innerHTML属性 既可读又可以写
    // 创建新元素
document.createElement(elem); // 将元素节点插入节点树
    // 追加子节点
parent.appendChild(child); // 在已有节点前插入新节点
node.parentNode.insertBefore(newNode, node); // DOM没有提供在现有节点后插入新节点的方法

    // 节点的下一兄弟节点
node.nextSibling; // 节点的前一兄弟节点
node.previousSibling; // 替换节点
someNode.replaceChild(newNode, oldNode); // 移除节点
someNode.removeChild(oldNode); // 克隆节点 true 深复制， false 浅复制
    node.cloneNode(boolean); // 创建文本节点
document.createTextNode(text); // CSS-DOM
    // 设置类名
    elem.setAttribute("class", "intro"); elem.className; // DOM扩展
    // 接收一个CSS选择符，返回匹配的第一个元素
elem.querySelector(); // 接收一个CSS选择符，返回匹配的NodeList
    elem.querySelectorAll();