搜索
您的当前位置:首页正文

JavaScript中对DOM节点的访问、创建、修改、删除_基础知识

2023-12-06 来源:爱乐情感
DOMDOM就是Document object Model的缩写。文档对象模型是把XML或HTML以树节点为表现形式的文档。用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素。DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript看看下面的一个文本。

 My page 

first paragraph

second paragraph

final

我们来看看第二段

second paragraph

可以看到这是个p标签。它被包含在body标签中。所以说body是p的父节点,p是子节点。第一段和第三段也是body的子节点。它们都是第二段的兄弟节点。这个em标签是第二段p的子节点。因此p就是它的父节点。父子节点关系能描绘出像树一样的关系。所以叫做DOM结构树(DOM tree). Core DOM 和 HTML DOM我们已经知道DOM可以描绘出HTML和XML文档。事实上HTML文档就是XML文档,只不过更为规范些。因此作为DOM Level 1的一部分,Core DOM规范适用于所有XML文档以及HTML DOM规范扩展了Core DOM.当然HTML DOM不能适用于所有的XML文档,仅仅适用于HTML文档。让我们来看看Core DOM和HTML DOM的构造器。 构造器关系

20151116142938841.png (639×572)

访问DOM节点当要验证表单或者更换图片之前,我们要知道怎么样访问元素(element.)。有很多方法获取元素。 Document节点通过document我们可以访问当前的文档。我们可以通过firebugs(火狐插件),来查看document的属性和方法。 所有的节点都有nodeType,nodeName,nodeValue的属性。我们来看看document的nodeType是什么

一共有12节点类型。document是9。常用的是元素(element:1),属性(attribute:2),文本(text:3)。节点还有名称。对于HTML标签。节点名称就是标签名称。文本节点(text)的名字是#text.文档节点(document)的名字是#document. 节点也有值。对于文本节点,值就是文本。document的值为null documentElementXML都会有个ROOT节点来包文档包含起来。对于HTML文档。ROOT节点就是html标签。访问root节点。可以用documentElement的属性。

Child Nodes为了确定是否包含子节点我们可以用如下方法

HTML有两个子节点。

也可以通过子节点访问父节点

我们把body的引用赋值变量

让我们看看body的结构

 

first paragraph

second paragraph

final

为什么子节点个数为9个呢。 首先是4个P还有一个注释一共4个。 4个节点包含了3个空白的节点。这就7个。 第8个在body和第一个p之间的空白节点。 第9个就是在注释与之间的空白节点。 一共9个节点。 属性因为第一节点是空白节点,所以第二个节点才是第一个p标签。

可以查看它是否有属性

也可以查看attributes的个数

访问标签里的内容让我们看看第一个标签p你可以用textContent属性来访问。要注意的是,在IE浏览器中并不存在textContent,请用innerText来替换,结果都是一样的。

还有一个属性是innerHTML.这并不是DOM的规范。但是主流浏览器都支持这个属性。它返回的是HTML代码。

第一段没有html代码,所以结果和textContent(IE里是innerText)是一样的。来看下第二段包含HTML代码的标签

另一种方法可以获取文本节点,然后再取nodeValue属性,代码如下

快速访问DOM通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中,文本节点是比较讨厌的。如果文本改变了,有可能就影响脚本了。还有如果DOM树足够的深入,那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是

首先说下getElementsByTagName()通过一个标签名称(tag name)来获取一个html元素的集合。例子如下

因为返回的是个集合,我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。

访问元素的属性,可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子

要注意的是,class属性不能正常的使用。要用className。因为class在javascript规范中是保留字。

我们可以用如下方法访问页面所有元素

注意:在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了,但是返回的是所有节点(node),而不仅仅是元素节点(element nodes)。 Siblings, Body, First, Last ChildnextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下

body 用来访问body元素的。

firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。 遍历DOM通过以上的学习,我们可以写个函数,用来遍历DOM

修改节点下面来看看DOM节点的修改。先获取要改变的节点。

非常容易更改这个元素的属性。我们可以更改innerHTML.

因为innerHTML可以写入html,所以我们来修改html。

em标签已经成为dom树的一部分了。我们可以测试一下

我们也可以通过nodeValue来改变值。

修改样式大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码

CSS属性很多都有破折号("-"),如padding-top,这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写,规范如下。 margin-left变为marginLeft。依此类推

我们还可以修改其他的属性,无论这些属性是否被初始化。

创建节点

为了创建一个新的节点,可以使用createElement和createTextNode.如果新建完成,可以用appendChild()把节点添加到DOM树中。创建一个元素P,并把设置innerHTML属性

元素P建完成了,就可以随意修改添加属性了

接下来可以用appendChild把新的节点添加到DOM树中的。

使用DOM的方法用innerHTML方法的确很简单,我们可以用纯的dom方法来实现上面的功能。

  • 新建一个文本节点(yet another)
  • 新建一个段落
  • 把文本节点添加到段落中。
  • 把段落添加到body中
  • 另一种新建节点的方法是,我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制,包括他的子节点,false,仅仅复制自己。 首先获取要复制的元素。

    先不用深度复制。

    我们发现页面并没有变化,因为仅仅复制的是元素p。和下面的效果一样。

    如果用深度复制,包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。

    insertBefore()用appendChild,就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。

    实例

    意思就是新建一个文本节点,把它作为body元素的第一个节点。 删除节点

    要从DOM树删除一个节点,我们可以使用removeChild().我们来看看要操作的HTML

     

    first paragraph

    second paragraph

    final

    来看看下面代码,删除第二段

    removed节点就是删除的节点。以后还可以用这删除的节点。 我们也可以用replaceChild()方法。这个方法是删除一个节点,并用另一个节点替代。当执行上个删除节点操作之后,结果如下

     

    first paragraph

    final

    我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p

    和removeChild返回一样。replaced就是移除的节点。现在结果为

     

    first paragraph

    second paragraph

    小编还为您整理了以下内容,可能对您也有帮助:

    有没有精通HTML的大神帮帮我。问题是:使用JavaScript操作页面内容(DOM),包括添加、修改、删除?

    使用JavaScript操作页面内容(DOM)可以通过以下方法实现:

    1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素,然后使用appendChild()或者insertBefore()方法将其添加到页面中。

    // 创建新的段落元素

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

    // 为段落赋值

    newP.innerHTML = "这是新添加的段落";

    // 找到需要添加新元素的父元素

    var parent = document.getElementById("myDiv");

    // 将新元素添加到父元素中

    parent.appendChild(newP);

    2、修改: 可以使用JavaScript中的getElementById()或者getElementsByTagName()方法来获取页面中的元素,然后使用innerHTML或者innerText属性来修改其中的内容。

    // 通过id获取需要修改的元素

    var myP = document.getElementById("myP");

    // 修改元素的内容

    myP.innerHTML = "这是修改后的段落";

    3、删除: 可以使用JavaScript中的removeChild()或者remove()方法来删除页面中的元素

    // 通过id获取需要删除的元素

    var myP = document.getElementById("myP");

    // 找到父元素

    var parent = myP.parentNode;

    // 从父元素中删除该元素

    parent.removeChild(myP);

    这是一种简单的方法,在实际应用中,使用JavaScript对页面进行操作还需要考虑到很多的因素,如浏览器兼容性、性能优化等。最好使用一些框架或库来帮助我们简化这些操作,例如jQuery、React、Vue等。总之,通过熟练掌握JavaScript和相关框架或库的使用,可以有效地操作页面内容并实现丰富的交互效果。

    使用dom编程,可以对节点对象实现什么操作?

    使用DOM编程,可以对节点对象实现以下操作:

    创建节点:使用createElement()方法创建一个新的元素节点。

    添加节点:使用appendChild()方法将一个节点添加为另一个节点的子节点。

    删除节点:使用removeChild()方法从父节点中删除指定的子节点。

    替换节点:使用replaceChild()方法将一个节点替换为另一个节点。

    插入节点:使用insertBefore()方法在指定节点之前插入一个新节点。

    获取和修改节点的属性:使用getAttribute()和setAttribute()方法获取和设置节点的属性。

    获取和修改节点的文本内容:使用textContent属性获取或设置节点的文本内容。

    遍历节点树:使用childNodes属性获取节点的子节点列表,使用parentNode属性获取节点的父节点,使用nextSibling和previousSibling属性获取相邻的兄弟节点。

    修改节点的样式:使用style属性获取或设置节点的CSS样式。

    绑定事件处理程序:使用addEventListener()方法将事件处理程序绑定到节点上。

    这些只是DOM编程中的一些常见操作,还有许多其他方法和属性可以用于操作和处理节点对象。具体的操作和实现方式可能会根据不同的编程语言、框架或库而有所不同。建议参考相关的文档、教程和示例代码,以了解更多关于DOM编程的详细信息。

    JS里面的DOM操作是什么

    1、DOM:DocumentObjectModel,文档对象模型;js提供了丰富的api来操作文档内容。DOM树:html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body节点:DOM将所有的分支端都成为节点。

    2、DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM,JavaScript根本没有Web页面和构成页面元素的概念。

    3、vardom=document.getElementById(节点id);这是通过节点的id来获取一个页面节点,也就是对节点的引用。这个时候,我们对变量dom的任何操作,实际上就是对页面节点的操作,比如说修改样式、移除节点、获取属性等等。

    JS之DOM操作

    DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
    DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
    节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
    可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

    特殊的元素节点:
    1、html元素

    2、body元素

    3、head元素

    节点操作的api(属性和方法)
    1、nodeName:只读属性,可以读取节点名称

    2、nodeType:只读属性,读取节点类型

    3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
    主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

    4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

    5、firstChild:获得节点的第一个子节点

    6、lastChild:获得节点的最后一个子节点

    7、querySelector():
    参数:string类型,css选择器
    作用:获得文档中第一个符合选择器条件的节点
    兼容:在IE9以下不支持

    8、 querySelectorAll(): // 获得的都是静态集合
    参数:string类型,css选择器
    作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
    兼容:在IE9以下不支持

    注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

    9、previousSibling:获取节点的前一个兄弟节点

    10、nextSibling:获取节点的后一个兄弟节点

    11、parentNode:获得节点的父节点(父节点一定是元素节点)

    12、removeChild():节点删除它的指定子节点
    DOM操作元素:暂时不用的隐藏、一定不用的删除。

    13、cloneNode():克隆一个节点
    参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
    深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
    浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

    14、a.replaceChild(b,c):用b替换c
    其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

    15、a.replaceWith(b):用b替换a
    a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

    16、a.insertBefore(b,c):在c前面插入b
    其中,a是c的父节点,c是已经存在的节点,b是新节点

    17、a.appendChild(b):在a末尾追加b

    a是父节点,b是a的子节点, c是子节点

    元素节点的相关api
    1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

    区别:HTMLCollection 是动态集合,NodeList 是静态集合。

    2、createElement():根据标签名创建新元素

    3、id:读写属性,可以读取或设置元素的id值

    4、className:读写属性,可以读取或设置元素的class值

    5、classList:读取标签的类名集合(类数组结构)

    add():为元素新增类名,如果类名已存在不会重复添加

    remove():删除元素指定类名,如果类名不存在不会执行操作

    元素的属性分为两类:
    一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
    再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
    6、setAttribute(name,value)
    参数:name表示要设置的属性名,value要为属性设置的值
    无返回值

    7、getAttribute(name)
    参数:name表示要读取的属性名
    返回值:返回属性的值,如果属性不存在会返回null

    8、removeAttribute(name)
    参数:name表示要删除的属性名
    无返回值

    说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

    element拓展:
    兼容:以下属性、方法在IE9以下不支持。

    1、children:读取元素的所有元素子节点集合(类数组)

    2、parentElement:读取元素的父元素节点

    3、previousElementSibling:读取前一个元素兄弟节点

    4、nextElementSibling:读取后一个元素兄弟节点

    5、firstElementChild:读取第一个元素子节点
    6、lastElementChild:读取最后一个元素子节点
    7、remove(): 将调用方法的元素从DOM结构中删除

    JS之DOM操作

    DOM: Document Object Model,文档对象模型;js提供了丰富的api来操作文档内容。
    DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body
    节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。
    可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

    特殊的元素节点:
    1、html元素

    2、body元素

    3、head元素

    节点操作的api(属性和方法)
    1、nodeName:只读属性,可以读取节点名称

    2、nodeType:只读属性,读取节点类型

    3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。
    主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

    4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

    5、firstChild:获得节点的第一个子节点

    6、lastChild:获得节点的最后一个子节点

    7、querySelector():
    参数:string类型,css选择器
    作用:获得文档中第一个符合选择器条件的节点
    兼容:在IE9以下不支持

    8、 querySelectorAll(): // 获得的都是静态集合
    参数:string类型,css选择器
    作用:获得文档中所有符合选择器条件的节点集合(类数组结构)
    兼容:在IE9以下不支持

    注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

    9、previousSibling:获取节点的前一个兄弟节点

    10、nextSibling:获取节点的后一个兄弟节点

    11、parentNode:获得节点的父节点(父节点一定是元素节点)

    12、removeChild():节点删除它的指定子节点
    DOM操作元素:暂时不用的隐藏、一定不用的删除。

    13、cloneNode():克隆一个节点
    参数:boolean类型,true深克隆,false浅克隆,默认浅克隆
    深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点
    浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

    14、a.replaceChild(b,c):用b替换c
    其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

    15、a.replaceWith(b):用b替换a
    a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

    16、a.insertBefore(b,c):在c前面插入b
    其中,a是c的父节点,c是已经存在的节点,b是新节点

    17、a.appendChild(b):在a末尾追加b

    a是父节点,b是a的子节点, c是子节点

    元素节点的相关api
    1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

    区别:HTMLCollection 是动态集合,NodeList 是静态集合。

    2、createElement():根据标签名创建新元素

    3、id:读写属性,可以读取或设置元素的id值

    4、className:读写属性,可以读取或设置元素的class值

    5、classList:读取标签的类名集合(类数组结构)

    add():为元素新增类名,如果类名已存在不会重复添加

    remove():删除元素指定类名,如果类名不存在不会执行操作

    元素的属性分为两类:
    一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过.语法读取或设置。
    再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过.语法读取,需要通过操作方法访问。
    6、setAttribute(name,value)
    参数:name表示要设置的属性名,value要为属性设置的值
    无返回值

    7、getAttribute(name)
    参数:name表示要读取的属性名
    返回值:返回属性的值,如果属性不存在会返回null

    8、removeAttribute(name)
    参数:name表示要删除的属性名
    无返回值

    说明:setAttribute()、getAttribute()、removeAttribute()都可以操作元素的本地属性和自定义属性。

    element拓展:
    兼容:以下属性、方法在IE9以下不支持。

    1、children:读取元素的所有元素子节点集合(类数组)

    2、parentElement:读取元素的父元素节点

    3、previousElementSibling:读取前一个元素兄弟节点

    4、nextElementSibling:读取后一个元素兄弟节点

    5、firstElementChild:读取第一个元素子节点
    6、lastElementChild:读取最后一个元素子节点
    7、remove(): 将调用方法的元素从DOM结构中删除

    操作JS中DOM节点有哪些方法


    这次给大家带来操作JS中DOM节点有哪些方法,操作JS中DOM节点的注意事项有哪些,下面就是实战案例,一起来看一下。
    DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!!
    一、DOM树的节点
    1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
    属性节点和文本节点都属于元素节点的子节点。 因此操作时,需先选中元素节点,再修改属性和文本。
    【查看元素节点】
    1、 使用getElement系列方法:
    具体的HTML代码如下图:
    //通过ID来查看元素属性
    var li = document.getElementById("first");
    //通过类名来查看元素属性
    var lis1 = document.getElementsByClassName("cls");
    //通过名字来查看元素属性
    var lis2 = document.getElementsByName("name");
    //通过标签名来查看元素属性
    var lis3 = document.getElementsByTagName("li");注意事项:
    ① ID不能重名,如果ID重复,只能取到第一个。
    ② 获取元素节点时,必须等到DOM树加载完成后才能获取。
    两种处理方式:
    a.将JS写在文档最后;
    b.将代码写入window.onload函数中;
    ③ 通过getElements系列取到的为数组格式,操作时必须取到其中的每一个元素,才能进行操作,而不能直接对数组进行操作。
    document.getElementsByTagName("li")[0].click = function(){}④ 这一系列方法,也可以先选中一个DOM节点,在从选中的DOM节点中,选择需要的节点:
    document.getElementById("p1").getElementsByTagName("li");【通过querySelector系列方法】
    ① 传入一个选择器名称,返回第一个找到的元素。 通常用于查找ID:
    var dq1 = document.querySelector("#id");② 传入一个选择器名称,返回所有找到的元素,无论找到几个,都返回数组格式。这种方法比较全能,不管什么属性都可以准确地找到。
    var dqs1 = document.querySelectorAll("#p1 li");【查看设置属性节点】
    1、 查看属性节点:.getAttribute("属性名");
    2、 设置属性节点:.setAttribute("属性名","属性值");
    注意事项:.setAttribute() 在老版本IE中会存在兼容性问题,可以使用.符号代替。
    【JS修改CSS的多种方式】
    1、 使用setAttribute设置class和style。
    document.getElementById("first").setAttribute("class","class1");
    document.getElementById("first").setAttribute("style","color:red;");2、使用.className添加一个class选择器。
    document.getElementById("first").className = "class1";3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
    document.getElementById("first").style.fontSize = "18px";4、 使用.style 或 .style.cssText 添加一串行级样式:
    // IE不兼容
    document.getElementById("first").style = "color:red;";
    //所有浏览器兼容
    document.getElementById("first").style.cssText = "color:red;";【查看/设置文本节点】
    1、.innerHTML: 取到或设置一个节点中的HTML代码。
    2、.innerText: 取到或设置一个节点中的文本,不能设置HTML代码。
    二、层次节点操作
    1. .childNodes: 获取当前节点的所有子节点(包括元素节点和文本节点)。
    .children: 获取当前节点的所有元素子节点(不包含文本节点)。
    2. .parentNode: 获取当前节点的父节点。
    3. .firstChild: 获取第一个子节点,包括回车等文本节点;
    .firstElementChild: 获取第一个元素节点。 不含文本节点;
    .lastChild: 获取最后一个子节点,包括回车等文本节点;
    .lastElementChild: 获取最后一个子节点,不含文本节点;
    4. .previousSibling: 获取当前节点的前一个兄弟节点,包括文本节点;
    .previousElementSibling: 获取当前节点的前一个元素兄弟节点;
    .nextSibling:获取当前节点的后一个兄弟节点,包括文本节点;
    .nextElementSibling:获取当前节点的后一个元素兄弟节点;
    5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。
    【创建并新增节点】
    1. document.createElement("标签名"): 创建一个新节点,并将创建的新节点返回。
    需要配合.setAttribute()为新节点设置属性。
    2. 父节点.insertBefore(新节点,目标节点): 在父节点中,将新节点插入到目标节点之前。
    父节点.appendChild(新节点): 在父节点的内部最后,插入一个新节点。
    3. 源节点.cloneNode(true): 克隆一个节点。
    传入true表示克隆源节点以及源节点的所有子节点;
    传入false或不传,表示只克隆当前节点,而不克隆子节点。
    【删除、替换节点】
    1. 父节点.removeChild(子节点): 从父节点中,删除指定子节点。
    2. 父节点.replaceChild(新节点,老节点): 从父节点中,用新节点替换老节点。
    相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
    推荐阅读:
    nodejs日志模块winston使用方法总结

    jQuery做出循环时间自动更换样式功能

    操作JS中DOM节点有哪些方法


    这次给大家带来操作JS中DOM节点有哪些方法,操作JS中DOM节点的注意事项有哪些,下面就是实战案例,一起来看一下。
    DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现。那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!!
    一、DOM树的节点
    1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。
    属性节点和文本节点都属于元素节点的子节点。 因此操作时,需先选中元素节点,再修改属性和文本。
    【查看元素节点】
    1、 使用getElement系列方法:
    具体的HTML代码如下图:
    //通过ID来查看元素属性
    var li = document.getElementById("first");
    //通过类名来查看元素属性
    var lis1 = document.getElementsByClassName("cls");
    //通过名字来查看元素属性
    var lis2 = document.getElementsByName("name");
    //通过标签名来查看元素属性
    var lis3 = document.getElementsByTagName("li");注意事项:
    ① ID不能重名,如果ID重复,只能取到第一个。
    ② 获取元素节点时,必须等到DOM树加载完成后才能获取。
    两种处理方式:
    a.将JS写在文档最后;
    b.将代码写入window.onload函数中;
    ③ 通过getElements系列取到的为数组格式,操作时必须取到其中的每一个元素,才能进行操作,而不能直接对数组进行操作。
    document.getElementsByTagName("li")[0].click = function(){}④ 这一系列方法,也可以先选中一个DOM节点,在从选中的DOM节点中,选择需要的节点:
    document.getElementById("p1").getElementsByTagName("li");【通过querySelector系列方法】
    ① 传入一个选择器名称,返回第一个找到的元素。 通常用于查找ID:
    var dq1 = document.querySelector("#id");② 传入一个选择器名称,返回所有找到的元素,无论找到几个,都返回数组格式。这种方法比较全能,不管什么属性都可以准确地找到。
    var dqs1 = document.querySelectorAll("#p1 li");【查看设置属性节点】
    1、 查看属性节点:.getAttribute("属性名");
    2、 设置属性节点:.setAttribute("属性名","属性值");
    注意事项:.setAttribute() 在老版本IE中会存在兼容性问题,可以使用.符号代替。
    【JS修改CSS的多种方式】
    1、 使用setAttribute设置class和style。
    document.getElementById("first").setAttribute("class","class1");
    document.getElementById("first").setAttribute("style","color:red;");2、使用.className添加一个class选择器。
    document.getElementById("first").className = "class1";3、 使用.style.样式 直接修改单个样式。 注意样式名必须使用驼峰命名法。
    document.getElementById("first").style.fontSize = "18px";4、 使用.style 或 .style.cssText 添加一串行级样式:
    // IE不兼容
    document.getElementById("first").style = "color:red;";
    //所有浏览器兼容
    document.getElementById("first").style.cssText = "color:red;";【查看/设置文本节点】
    1、.innerHTML: 取到或设置一个节点中的HTML代码。
    2、.innerText: 取到或设置一个节点中的文本,不能设置HTML代码。
    二、层次节点操作
    1. .childNodes: 获取当前节点的所有子节点(包括元素节点和文本节点)。
    .children: 获取当前节点的所有元素子节点(不包含文本节点)。
    2. .parentNode: 获取当前节点的父节点。
    3. .firstChild: 获取第一个子节点,包括回车等文本节点;
    .firstElementChild: 获取第一个元素节点。 不含文本节点;
    .lastChild: 获取最后一个子节点,包括回车等文本节点;
    .lastElementChild: 获取最后一个子节点,不含文本节点;
    4. .previousSibling: 获取当前节点的前一个兄弟节点,包括文本节点;
    .previousElementSibling: 获取当前节点的前一个元素兄弟节点;
    .nextSibling:获取当前节点的后一个兄弟节点,包括文本节点;
    .nextElementSibling:获取当前节点的后一个元素兄弟节点;
    5. .attributes: 获取当前节点的所有属性节点。 返回数组格式。
    【创建并新增节点】
    1. document.createElement("标签名"): 创建一个新节点,并将创建的新节点返回。
    需要配合.setAttribute()为新节点设置属性。
    2. 父节点.insertBefore(新节点,目标节点): 在父节点中,将新节点插入到目标节点之前。
    父节点.appendChild(新节点): 在父节点的内部最后,插入一个新节点。
    3. 源节点.cloneNode(true): 克隆一个节点。
    传入true表示克隆源节点以及源节点的所有子节点;
    传入false或不传,表示只克隆当前节点,而不克隆子节点。
    【删除、替换节点】
    1. 父节点.removeChild(子节点): 从父节点中,删除指定子节点。
    2. 父节点.replaceChild(新节点,老节点): 从父节点中,用新节点替换老节点。
    相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
    推荐阅读:
    nodejs日志模块winston使用方法总结

    jQuery做出循环时间自动更换样式功能

    什么是DOM?

    DOM是网页中的用来表示文档中对象的标准模型,通过JavaScript可以对网页中的所有DOM对象进行操作,是由万维网联盟W3C组织制定的标准编程接口。

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。

    Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。

    微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。

    扩展资料:

    DOM的分级:

    根据W3C规范,将DOM分为1级、2级、3级共3个级别。

    1、1级DOM

    1级DOM在1998年10月份成为W3C的提议,由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构,允许获取和操作文档中的任意部分。

    2、2级DOM

    鉴于1级DOM仅以映射文档结构为目标,DOM 2级面向更为宽广。通过对原有DOM的扩展,2级DOM通过对象接口增加了对鼠标和用户界面事件、范围、遍历(重复执行DOM文档)和层叠样式表(CSS)的支持。同时也对DOM 1的核心进行了扩展,从而可支持XML命名空间。

    3、3级DOM

    3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展,DOM3包含一个名为“DOM载入与保存”的新模块,DOM核心扩展后可支持XML1.0的所有内容,包括XML Infoset、 XPath、和XML Base。

    参考资料来源:百度百科-DOM

    HTML5 js如何获取所有相同ID或class的元素?

    下面例子通过document.getElementsByClassName("class1")获取所有同一class的元素,使用for循环把取得的div元素的值存入数组arr中,完成的代码如下:

    运行结果,打印数组如下:

    扩展资料:

    js或jQuery获取html元素的值的常用方法:

    例如:<div id="aa">值</div>

    js写法:

    alert(document.getElementById('aa').innerHTML);

    jQuery写法:

    alert($('#aa').html());

    说明如下:

    innerHTML是取元素的内部html代码,此例中即div内部的所有html代码。

    html()方法作用也是取dom节点的内部html内容,是jQuery中的函数方法。

    爱乐情感还为您提供以下相关内容希望对您有帮助:

    操作JS中DOM节点有哪些方法

    一、DOM树的节点1、 DOM节点分为三大类: 元素节点(标签节点)、属性节点和文本节点。属性节点和文本节点都属于元素节点的子节点。 因此操作时,需先选中元素节点,再修改属性和文本。【查看元素节点】1、 使用getElement系列...

    有没有精通HTML的大神帮帮我。问题是:使用JavaScript操作页面内容(DOM...

    1、添加: 可以使用JavaScript中的document.createElement()方法来创建新的元素,然后使用appendChild()或者insertBefore()方法将其添加到页面中。// 创建新的段落元素 var newP = document.createElement("p");// 为段落赋值 n...

    JS里面的DOM操作是什么

    1、DOM:DocumentObjectModel,文档对象模型;js提供了丰富的api来操作文档内容。DOM树:html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body节点:DOM将所有的分支端都成为节点。2、DOM是面向HT...

    使用dom编程,可以对节点对象实现什么操作?

    创建节点:使用createElement()方法创建一个新的元素节点。添加节点:使用appendChild()方法将一个节点添加为另一个节点的子节点。删除节点:使用removeChild()方法从父节点中删除指定的子节点。替换节点:使用replaceChild()方法将...

    JS之DOM操作

    读取前一个元素兄弟节点 4、nextElementSibling:读取后一个元素兄弟节点 5、firstElementChild:读取第一个元素子节点 6、lastElementChild:读取最后一个元素子节点 7、remove(): 将调用方法的元素从DOM结构中删除 ...

    js节点是什么意思

    JS节点是指在JavaScript中操作DOM(文档对象模型)时,可以找到或创建的单个元素。这个节点可以是HTML中的一个标签或一个文本节点,也可以是一个script元素或其他类型的元素。在DOM中,节点形成了一个树状结构,其中每个节点都...

    js dom dom操作用的多吗

    js中常用DOM操作有哪些 DOM常用操作 查询节点 新建节点 新增节点 删除节点 修改节点 我们用到最多的是element型别,用于表现HTML元素,提供了对元素标签名、子节点及特性的访问。网页连结 js就是操作DOM用的么 JS只是一...

    dom操作中创建一个dom片段的方法

    这样,你就创建了一个包含一个段落的新的DOM片段,并将其添加到了文档中。DOM的基本属性 nodeName:返回节点的名称。对于元素节点,返回标签名;对于文本节点,返回"#text";对于注释节点,返回"#comment"等。nodeValue:返回...

    JavaScript高级程序设计:访问指定节点

    当然 你不想逐个检查子节点直到遇到要访问的那个节点 为在这种情况下助你一臂之力 DOM提供一些方法来方便地访问指定的节点 getElementsByTagName()核心(XML)DOM定义了getElementsByTagName()方法 用来返回一个包含所有的...

    如何对jQuery元素进行增加和删除

    这篇文章就和大家讲讲如何对jQuery元素进行增加和删除。有需要的朋友可以参考一下,希望对你有用。DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。1、DOM CoreDOM Core并不专属于javascript,任何一种...

    本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

    Top