DOM

DOM简介

中译为文档对象模型

本质：它将web页面和脚本或编程语言连接起来了，通过在js中使用HTML DOM来对HTML页面做添加标签、移动标签、删除某些标签等操作，或者是让页面弹出一个消息框等。

节点

DOM的最小组成单位叫做节点

节点分类

文档节点Document
元素节点Element:例如HTML文档中的HTML标签。
属性节点Attribute:元素的属性，表示的是标签中的一个一个的属性，这里要注意的是属性节点并非是元素节点的子节点，而是元素节点的一部分。
文本节点Text:HTML标签中的文本内容。
其他节点 other:DocumentType，表示的是doctype标签，

Document

documentElement 始终指向HTML页面中的元素。 body 直接指向元素 title 获取文档的标题。 domain 取得域名，并且可以进行设置，在跨域访问中经常会用到。 referrer 取得链接到当前页面的那个页面的URL，即来源页面的URL。 images 获取所有的img对象，返回HTMLCollection类数组对象。 forms 获取所有的form对象，返回HTMLCollection类数组对象。 links 获取文档中所有带href属性的< a >元素。

`documentElement`

document.getElementById(id) 通过标签id值查找元素

<div id="d1">我是一个div标签</div>
<script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
</script>

或document.getElementsByTagName(name)标签名

document.getElementsByClassName(name)

document.querySelector

document.querySelectorAll()

元素节点Element

classList 返回该元素包含的 class 属性的集合。
className 获取或设置指定元素的 class 属性的值。
clientHeight 获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
clientTop 返回该元素距离它上边界的高度。
clientLeft 返回该元素距离它左边界的宽度。
clientWidth 返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
innerHTML 设置或获取文本节点的内容和子元素标签及其下面的文本内容
innerText 设置或获取纯文本节点的内容，包括子标签下的文本内容
tagName 返回当前元素的标签名。

文本节点Text

属性及方法 length 文本长度 appendData(text) 追加文本 deleteData(beginIndex,count) 删除文本 insertData(beginIndex,text) 插入文本 replaceData(beginIndex,count,text) 替换文本 splitText(beginIndex) 从beginIndex位置将当前文本节点分成两个文本节点 document.createTextNode(text) 创建文本节点，参数为要插入节点中的文本 substringData(beginIndex,count) 从beginIndex开始提取count个子字符串

<div id="container"></div>
<script>
    //创建文本节点
    var textNode = document.createTextNode("Hello World");

    //获取id为container的标签
    var div = document.getElementById("container");

    //将文本节点插入div节点
    console.log(div.appendChild(textNode)); 
    console.log(div.innerHTML); // Hello World

    //将原文本从0位置开始替换后面5个位置的内容替换
    textNode.replaceData(0,5,"Hi");
    console.log(div.innerHTML); // Hi World

    //在0位置插入新内容
    textNode.insertData(0,"Hello");
    console.log(div.innerHTML); //HelloHi World
</script>

初识DOM

DOM