原生js操作DOM元素的一些使用

JavaScript013

原生js操作DOM元素的一些使用,第1张

方法一:

使用DOM.setAttribute("class","类名")

方法二:

DOM.classList.add("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名

概念:把要添加的节点添加到指定父级里面的最后面,所以也叫追加。

使用方式:fatherdom.appendChild( insertdom )。

兼容性:所有浏览器都支持此方法。

概念:把要插入的节点添加到指定父级里面的指定节点之前。

使用方式:fatherdom.insertBefore( insertdom,chosendom )。

兼容性:所有浏览器都支持此方法,但是值得注意的是,如果第二个参数节点不存在,在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中,而其他主流浏览器(Firefox、Chrome、Opera等)下会报错,所以在插入节点的时候,需要先判断第二个参数节点是否存在

效果

注意:很多人都认为设置disabled="true"是为启用,设置为“false”时为禁用,这是错的。

在 HTML DOM (文档对象模型)中,每个部分都是节点:

文档本身是文档节点

所有 HTML 元素是元素节点

所有 HTML 属性是属性节点

HTML 元素内的文本是文本节点 (包括回车符也是属于文本节点)

注释是注释节点

Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。

<bookstore>

          <book category="children">

                    <title lang="en">Harry Potter</title>

                    <author>J K. Rowling</author>

                    <year>2005</year>

                    <price>29.99</price>

          </book>

          <book category="cooking">

                    <title lang="en">Everyday Italian</title>

                    <author>Giada De Laurentiis</author>

                    <year>2005</year>

                    <price>30.00</price>

            </book>

</bookstore>

元素和节点的区别:元素是一个小范围的定义,必须是含有完整信息的节点才是一个元素。

比如:<author>......./<author>是一个元素。而<author>是一个子节点或者是元素节点,Vaidyanathan Nagarajan是一个文本节点。

换句话说就是 元素一定是节点,但节点不一定是元素。

node(节点)是相对Tree这种数据结构而言的。Tree就是由Node组成。

element则是xml里面的概念,<xxx>就是元素,是xml中数据的组成部分之一。

DOM将文档中的所有都看作节点node>element

一个元素是由开始标签、结束标签以及标签之间的数据构成的

总结:元素是元素节点,是节点中的一种,但元素节点中可以包含很多的节点。

DOM 的全称是" Document Object Model ",中文意思为“文档对象模型”。

就像 JS 中所有的对象都继承自 Object 一样,浏览器提供一个原生的节点对象 Node (Node 是一个函数), DOM 的所有节点都继承自 Node ,Node 又继承自 Object,因此它们具有一些共同的属性和方法。

一个文档的所有节点,按照所在的层级,可以抽象成一种树状结构。这种树状结构就是 DOM 树。

顶层的 根节点 html 属于 Document 节点,代表整个文档;

第二层级和第三层级的属于 Element 节点,即网页的各种 HTML 标签;

第四层级的属于 Text 节点,即标签之间或标签包含的文本。

页面中的节点,通过上述不同的构造函数,构造出相应的对象。

由此可以看出 DOM 的主要作用 :DOM 是 JavaScript 操作网页的接口,它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(如增删改查)。

DOM 有自己的国际标准,目前通用版本是 DOM 3。

Node 属性有很多,用到时可以查询文档。

如果一个属性是函数,那么这个属性也叫做 方法 ;即方法是函数属性。

document对象是文档的根节点,window.document属性就指向这个对象。

通过 DOM API 获取到的 elements 都是伪数组。

Element 对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个 Element 节点对象。

DOM 提供两种节点集合,用于容纳多个节点: NodeList 和 HTMLCollection 。这两种集合都属于接口规范。许多 DOM 属性和方法,返回的结果是 NodeList 实例或 HTMLCollection 实例。

节点对象除了继承 Node 接口以外,还会继承其他接口。