PS：此文章涵盖DOM的绝大部分基础知识优点是可快速上手缺点是深度及扩展不够

DOM简介

DOM = Dociment Object Model 文档对象模型

js中对象分类三种：

用户定义对象
内建对象 Array Date Math
宿主对象

html的各个标签组成一个DOM树也称节点树

DOM的节点分类

元素节点例如p标签 ul标签等（element node）
文本节点例如p标签包含的文本内容（text node）
属性节点例如p标签内有个title="xx" title即为属性节点（attribute node）

获取元素节点的方法

<ul id="test">
        <li class="item">javascript</li>
        <li class="item">css</li>
    </ul>

<script type="text/javascript">
    
    //1.document.getElementById()单个对象
    var oid = document.getElementById("test");
    console.log(oid);
    console.log(typeof oid);//返回的是一个object对象
    
    //2.document.getElementByTagNames()获取的是一个节点对象集合 不是数组
    var oclass = document.getElementsByTagName('li');
    console.log(oclass);
    console.log(oclass[0]);//获取li集合里的第一个对象 javascript
    console.log(typeof oclass);//返回的是一个object对象
   
    //3.document.getElementsByClassName()获取的是一个节点对象集合
    var oitem = document.getElementsByClassName('item');
    console.log(oitem);

</script>

小结

1.document.getElementById() 获取单个对象

2.document.getElementByTagNames()获取的是一个节点对象集合不是数组

3.document.getElementsByClassName()获取的是一个节点对象集合

获取、设置属性节点

首先创建一个新的标签

<p title="我是标题">tttt</p>

接着在 JS 中获取该标签

var op = document.getElementsByTagName("p")[0];

获取该标签属性内容

var title = op.getAttribute('title');
console.log(title);//即可获取title中的属性内容

添加一个属性名为id

属性内容为box的属性来更改p标签内的文本颜色

首先在style设置一个样式

<style>
    #box{
        color: red;
    }
</style>

接下来在 JS 中添加

op.setAttribute('id', 'box');//op是上面获取标签时设置的变量

就可以将p标签内的tttt文本颜色变更为红色

PS：正常来说在设置属性后p标签应该是

<p title="我是标题" id="box">tttt</p>

但实际上我们观看页面源码中里p标签却还是

<p title="我是标题">tttt</p>

原因是静态内容是在加载页面中就显示了而DOM在动态刷新内容且不会影响静态内容

小结

1.获取属性值getAttribute()

2.设置属性及属性值setAttribute('要添加的属性'， '要添加的属性的内容')

DOM的三个重要属性

nodename属性：节点名称
nodeValue属性：节点的值
nodeType属性：节点的类型

获取补充三个属性的代码

<p id="good">我是文本内容<!--我是注释文本--></p>

  <script type="text/javascript">
    //1元素节点
    var odiv = document.getElementById('good');
    console.log(odiv.nodeName + "|" + odiv.nodeValue + "|" + odiv.nodeType);

    //2属性节点
    var oatt = odiv.attributes[0];
    // console.log(oatt);
    console.log(oatt.nodeName + "|" + oatt.nodeValue + "|" + oatt.nodeType);

    //3文本节点
    var otext = odiv.childNodes[0];
    console.log(otext.nodeName + "|" + otext.nodeValue + "|" + otext.nodeType);

    //4注释节点
    var onotes = odiv.childNodes[1];
    console.log(onotes.nodeName + "|" + onotes.nodeValue + "|" + onotes.nodeType);

    //5文档节点
    console.log(document.nodeName + "|" + document.nodeValue + "|" + document.nodeType)

节点对象其他属性

父子兄弟节点

1.子节点 childNodes firstchild lastchild
2.父节点 parentNode
3.同级下一个兄弟节点 nextSibling
4.同级上一个兄弟节点 previousSibling

ps:子节点与兄弟节点获取出来的还有换行的文本内容

动态的节点操作

创建节点 creatElement（）
插入节点 appendChild()（插入到子节点里） insertBefore(newNode, node) 在node节点之前插入newNode
删除节点 removeChild()
替换节点 replaceChild(newNode, node) 用newNode替换node节点
创建文本节点 creatTextNode()
innerHTML = ' '; 等同于creatTextNode
innerTEXT = ' '; 会将插入的标签文本化

动态操作样式

<p id="box">QAQ</p>
<script type="text/javascript">
    var oid = document.getElementById("box");
    //oid.style.样式名称 ="样式内容";
    oid.style.color = 'red';//文本颜色变为红色
    oid.style.textAlign = 'center';//文本水平居中

事件

xx.onclick = function（）｛｝鼠标点击事件
xx.onmouseover = function（）｛｝鼠标经过事件
xx.onmouseout = function（）｛｝鼠标移开事件
xx.onchange = function（）｛｝文本框内容改变事件
xx.onselect = function（）｛｝文本框内容被选中事件
xx.onfocus = function（）｛｝光标聚焦事件
xx.onblur = function（）｛｝光标失焦事件
xx.onload = function（）｛｝网页加载事件
xx.oninput = function（）｛｝文本框实时监控事件(只要内容被改变就触发)

xx.oninput = function(){
    console.log(this.value);//输入什么实时打印什么
}

window.onload = function(){} 等待文档元素加载完成才会调用onload 用于将js写在head里的情况

JS - DOM

PS：此文章涵盖DOM的绝大部分基础知识 优点是可快速上手 缺点是深度及扩展不够