Javascript基础教程(三十一)

1.什么是DOM

DOM：Document Object Model. 每个载入浏览器的 HTML 页面都会成为 document 对象,Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问,document对象是window对象下的，在使用时，可以省略window。

DOM文档对象模型是基于HTML树的api,这里可以把html经过浏览器解析后形成DOM树,使用DOM可以操作html树的节点,即对html标签进行增删改差操作。

上图就是一个简单的DOM树形结构

通过浏览器解析的html是document对象(文档节点,根节点).Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

HTML 元素是Element 对象(元素节点),Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点

HTML 元素的属性是属性节点,文本是文本节点,注释是注释节点

小结:

三层结构,单个html页面是document对象(文档节点),有方法可以访问它的子节点,即html元素
html元素是元素节点对象,有方法可以访问它自己的属性节点,属性,文本节点,文本,子节点,父节点
属性节点也是节点对象,但只能是元素节点的子节点
还有事件对象,但事件对象是属于元素节点的属性

2.DOM常见的元素类型

元素	说明
Document	document是单个html页面的对象
Element	元素节点的分支包括了属性节点,文本节点(HTML 元素内的文本) ,注释节点(注释),和子元素节点
attr 属性对象	Attr 对象表示 HTML 属性节点,是在元素节点的下一级的节点
event对象	event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态

3.获取各种类型的节点

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<h1>DOM测试</h1>
<ul type="square">
    <li>Java</li>
    <li>HTML</li>
    <li>Css</li>
    <li>Javascript</li>
</ul>
<script>
    let rootNode = window.document;
    //获得文档节点
    console.log(rootNode.nodeType + "," + rootNode.nodeName + "," + rootNode.nodeValue);
    //获得元素节点
    let elementNode = document.getElementsByTagName("ul")[0];
    console.log(elementNode.nodeType + "," + elementNode.nodeName + "," + elementNode.nodeValue);
    //获取属性节点
    let attrNode = elementNode.getAttributeNode("type");
    console.log(attrNode.nodeType + "," + attrNode.nodeName + "," + attrNode.nodeValue);
    //获取文本节点
    let textNode = document.getElementsByTagName("h1")[0].firstChild;
    console.log(textNode.nodeType + "," + textNode.nodeName + "," + textNode.nodeValue);
    //获取子元素集合
    let childNodes = document.getElementsByTagName("ul")[0].childNodes;
    childNodes.forEach(function(n){
        //注意：li前面的回车也当做ul的子节点。 
        console.log(n.innerText);
    })

</script>
</body>
</html>

运行结果：