JavaScript——DOM对象

阅读 68

2022-04-25

1、什么是DOM

文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口

W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。

文档:一个页面就是一个文档,DOM中使用doucument来表示
元素:页面中的所有标签都是元素,DOM中使用 element 表示
节点:网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用node表示
DOM 把以上内容都看做是对象。

 元素节点  属性节点  文本节点
nodeName节点名称/tagName标签名称
nodeType(节点类型)返回1  元素节点
nodeValue  返回null  节点值

元素节点

属性节点

文本节点


节点类型:元素节点 1、属性节点 2、文本节点 3
通过父节点对象查找子节点对象方法:
父节点对象:
firstChild第一个子节点 可能有文本节点 换行
lastChild、最后一个子节点 可能有文本节点 换行
childNodes(多个)
通过父节点对象查找子元素节点对象:
firstElementChild第一个元素节点
lastElementChild最后一个元素节点
children多个   所有子元素节点


子节点查找父节点
子节点对象.parentNode  通过子节点查找父节点
子节点对象.parentElement  通过子节点查找父元素
节点对象.getAttribute("属性名")根据属性名获取属性值
节点对象.setAttribute("属性名","属性值")根据属性名设置属性值 
节点对象.removeAttribute("属性名")删除对应的这对属性
document.createElement("元素名称")创建元素对象
document.appendChild(子节点)追加

兄弟之间查找 

    console.log(oLi.nextSibling); //查找下一个兄弟节点 可能为文本

    console.log(oLi.nextElementSibling); //查找下一个元素兄弟节点

    console.log(oLi.nextSibling.nodeValue);

    console.log(oLi.previousSibling); //查找上一个兄弟节点 可能为文本

    // console.log(oLi.previousSibling.previousSibling);

    console.log(oLi.previousElementSibling); //查找上一个元素兄弟节点

 

创建元素对象

    document.createElement("元素名称");

追加元素对象到父元素内部最后

    父元素节点.appendChild(子节点);

 

精彩评论(0)

0 0 举报