JavaScript——DOM知识点

DOM知识点

DOM介绍

DOM，全称Document Object Model文档对象模型

1.JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

2.文档– 文档表示的就是整个的HTML网页文档

3.对象– 对象表示将网页中的每一个部分都转换为了一个对象。

4.模型– 使用模型来表示对象之间的关系，这样方便我们获取对象

DOM树 ：数据结构

HTML文件 ——> 浏览 ——> 网页数据

浏览器 ——> 数据结构——> 便捷 查找 修改 遍历 操作

DOM数据结构：为树型

数据结构

• 线性：单链表，循环列表，队列，栈，数组

• 树型：二叉树， 平衡树，红黑树

• 网状：有向图，无向图

DOM树:

DOM获取元素节点

获取节点最长用的三种方式

1 . 通过ID查找——在“HTML”中ID是存在唯一性的 ，使用ID获取节点的方法：document.getElementByID( );

    var x = document.getElementById("bady_name");

2 .通过标签名字查找获取节点的方法document.getElementByTagName( ); 由于在HTML中标签会重复所以获得的是数组的方式存在的，获取单个的方式只能用数组下标的方式获取

实例：

    var x = document.getElementByTagName("p");
    x[0];

2 .通过class名字查找获取节点的方document.getElementByClassName( ); 由于在HTML中class的名字会重复所以获得的是数组的方式存在的，获取单个的方式只能用数组下标的方式获取

实例：

    var x = document.getElementByClassName("h1");
    x[0];

4 .class和标签都可以通过在上一级的标签下查找

实例：

    var x = document.getElementById("bady_name");
    var y = x.getElementByClassName("h1");
    y[0];

创建+添加+删除 节点

创建一个标签节点：document.createElement(标签)；

实例：

   var x1 = document.createElement("p");

创建一个文本节点: document.createTextNode(文本)；

实例：

    var x2 = document.createTextNode("文本节点");

添加节点: appendChild(节点名)；

实例：

   x1.appendChild(x2);

删除节点: 上一级标签名字.removechild(节点名)；

实例：

   var x1 = document.createElement("p");
   x1.removechild(x2);

自己删除自己节点:要删除节点的名字 . parentNode.removeChild()

实例：

   x1.parentNode.removeChild("x1");

如有对本章代码有问题可以联系作者