DOM操作

JavaScript DOM操作

目标

• 理解DOM的概念和DOM树
• DOM节点4
• DOM写入和查找
• DOM操作

DOM概念

文档对象模型

DOM能用来干什么？

HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

DOM的核心是什么？

document 文档对象模型

DOM树

document 对象的获取方法

document.getElementById("id名");//只找到一个
document.getElementsByClassName("类名");//数组形式
document.getElementsByName("name值");//数组形式
document.getElementsByTagName("标签名");//数组形式

对元素内容的操作(设置、获取内容)

对象.innerHTML  设置或获取对象起始和结束标签内的内容(识别标签)。
对象.innerText  设置或获取对象起始和结束标签内的文字内容(不识别标签)
对象.value      仅作用于表单

对元素属性的操作

    getAttribute()(获取属性)
    createAttribute()(创建属性)
    setAttribute()(设置属性)
    removeAttribute()(删除属性)

对元素样式的操作

    node.style.属性名 = "属性值"
    node.style.cssText = "属性名：属性值;属性名：属性值;......"
    node.className = "类名"            （ ****************** 重要）
    node.setAttribute("属性名", "属性值");

DOM节点有哪些

    元素节点（标签节点）     1
    属性节点                2
    文本节点                3
    注释节点                8
    文档节点                9

节点的属性，节点之间的关系

    fristChild: 返回当前节点的首个子节点(第一个子节点)
    firstElementChild：获取指定元素下第一个子元素节点(第一个子元素节点)
    lastChild: 返回当前节点最后一个子节点(最后一个子节点)
    lastElementChild：此属性可以返回指定元素的最后一个子元素节点(最后一个子元素)
    nextSibling: 返回同一层级中指定节点之后紧跟着的节点(下一个兄弟节点)
    nextElementSibling：返回当前节点的下一个兄弟元素节点(下一个兄弟元素)
    previousSibling: 返回同一层级中指定节点之前紧跟着的节点(上一个兄弟节点)
    previousElementSibling：获取节点紧邻的上一个同级元素节点(上一个兄弟元素)
    parentNode: 返回当前节点的父节点(父节点)
    children：指定元素的子元素集合，只包括元素节点，不包括文本节点等其它节点(所有的子元素节点)
    childNodes: 元素节点的所有子节点的集合(所有的子节点)

节点的属性，节点的名称、类型、值

    nodeName(节点名称)
    nodeType(节点类型)
    nodeValue(节点值)

节点的方法，创建节点、删除节点、添加节点、插入节点、克隆节点

    document.createElement("标签名");//创建节点
    remove();//删除节点
    append();//添加节点
    insertBefore();//插入节点
    cloneNode();//克隆节点