文章目录

前言
一、DOM是什么？
二、获取元素节点的方法
- 1.获取body和head节点
- 2.通过ID获取元素节点
- 3.通过class获取元素节点
- 4.通过name属性获取元素节点
- 5.通过标签名获取元素节点
- 6.通过css选择器获取元素节点
三、操作元素的属性
四、操作元素的样式属性
五、节点操作
六、节点的属性
六、其他

前言

提示：DOM

DOM树理解。

一、DOM是什么？

示例：DOM（document object model）文档对象模型。当页面被加载的时候，浏览器会创建页面的DOM

D：文档 - DOM将HTML页面解析为一个文档 —> document对象

O：对象 - DOM将HTML页面中内容解析为对应的对象

M：模型 - DOM中对象之间的关系(节点树结构)

作用：动态操作html元素节点(写特效)和节点(element)的样式操作（增删改查）

二、获取元素节点的方法

1.获取body和head节点

代码如下（示例）：

1. document.body //返回值是节点的本身,当前某个节点对象

2. document.head //返回值是节点的本身,当前某个节点对象

2.通过ID获取元素节点

代码如下（示例）：

<body><div id="box"></div>
</body><script>var div = getElementById("box");console.log(div);
</script>

id一旦被生成，有且只有一个，初始的第一个ID元素。

3.通过class获取元素节点

代码如下（示例）：

<body><div class="box"></div>
</body><script>var div = getElementsByClassName("box");console.log(div);
</script>

返回的是元素数组的集合，伪数组(没有API可操作)

4.通过name属性获取元素节点

代码如下（示例）：

<body><input name="st">
</body><script>var ele = getElementsByName("st");console.log(ele);
</script>

返回的是节点数组的集合，伪数组

5.通过标签名获取元素节点

代码如下（示例）：

<body><div>22222</div>
</body><script>var ele = getElementsByTagName("div");console.log(ele);
</script>

返回的是元素数组的集合，伪数组(没有API可操作)

6.通过CSS选择器获取元素节点

代码如下（示例）：

<body><div id="box">22222</div><div class="box">3333</div><div class="box">4444</div><p id="box"></p>
</body><script>var ele = querySelector("#box");console.log(ele);var eles = querySelectorAll(".box");console.log(eles);
</script>

1. querySelector();//有且只匹配一个元素

2. querySelectorAll();//匹配所有选择器

三、操作元素的属性（html）

1、设置元素属性

例如：
<img src=" " alt=" " id="img" width="200px" height="300px">

var ele = document.getElementById("img")；

ele.属性 = "值"

或者ele.setAtrribute(属性，"值")

2、获取元素属性

ele.属性

或者ele.getAtrribute(属性)

3、删除元素属性

ele.属性 = " "

或者ele.removeAtrribute(属性)

四、操作元素的样式属性（css样式）

本质：操作style样式属性

1.设置样式

ele.style.css样式属性 = "值"

2.获取样式

ele.style.css属性

五、节点操作

1、创建元素节点：document.createElement(tagName)

2、创建文本节点：document.createTextNode="str"

3、追加子节点：parent.appendChild(ele)

4、追加子节点：parent.insertBefore(a,b)

5、删除子节点：parent.removeChild(ele)

6、删除自身节点：ele.remove( )

7、替换节点：parent.replaceChild(a,b)

8、复制节点：ele.cloneNode("true|false")

六、节点的属性

1、节点名称：ele.nodeName

2、节点的值：ele.nodeValue

3、节点的类型：ele.nodeType

4、获取元素所有的子节点：parent.children

5、获取当前元素的下一个兄弟元素：ele.nextSibling

6、获取当前元素的上一个兄弟元素：ele.previousSibling

7、获取某个元素的第一个子元素：parent.firstChild

8、获取某个元素的第一个子元素：parent.lastChild

<body><div><a href="#">link</a><b id="b1">111111</b><p>5555555555555555555555555555555555555555555555.</p></div>
</body<script>//节点var div = document.getElementByTagName("div")[0];console.log(div.childNodes);console.log(div.children);var b =document.getElementById("b1")console.log(b.parentNode);//获取父节点console.log(b.nextElementSibling);//兄弟节点console.log(b.previousElementSibling);//兄弟节点//新增节点var img =document.createElement("img");img.src = "src"div.insertBefore(img,b);console.log(b.NodeName);console.log(b.NodeType);//替换节点div.repleceChild(img,b);</script>

七、其他

1.设置元素的内容：innerText="值" ------------------只能设置纯文本，对双标签才有用

2.设置元素的内容：innerHTML="值"--------------------不仅可以设置文本，支持html标签解析

3.元素属性添加：ele.id;ele.calssName..........

总结

DOM作用：通过js动态操作元素（动态元素的属性；动态元素的样式；节点操作（文档的标签））

JavaScript中的DOM对象相关推荐

javascript中的:DOM对象
Document Object Model(文档对象模型)简称DOM,可以随便的去修改网页的内容,实现各种网页特效,HTML 中的所有的标签都会当成对象来对待目录 1. 获取 DOM 对象 2. 修 ...
js中的DOM对象和jQuery对象的比较
1. 二者的不同之处: 通过jQuery获取的元素是一个数组, 数组中包含着原生JS中的DOM对象. 例如, 针对下面的一个div结构: <div id="Box">& ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
JavaScript id_好程序员web前端分享Javascript中函数作为对象
好程序员web前端分享Javascript中函数作为对象,Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性, ...
vanilla_如何在Vanilla JavaScript中操作DOM
vanilla by carlos da costa 通过卡洛斯·达·科斯塔如何在Vanilla JavaScript中操作DOM (How to manipulate the DOM in Van ...
jQuery过滤器：筛选jquery对象数组中的DOM对象
目录一.定义: 二.基本过滤器: 一.定义: 过滤器就是过滤条件,对已经定位到jquery对象数组中的DOM对象进行过滤筛选,过滤条件不能独立出现在jquery函数,如果使用则只能出现在选择器后方. ...
Javascript基础与面向对象基础~第四讲 Javascript中的类对象
今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
php节点对象,JavaScript_JavaScript中访问节点对象的方法有哪些如何使用，JavaScript中访问节点对象的方法 - phpStudy...
JavaScript中访问节点对象的方法有哪些如何使用 JavaScript中访问节点对象的方法有哪些? var obj = document.getElementById('fdafda'); va ...

JavaScript中的DOM对象

文章目录

前言

一、DOM是什么？

二、获取元素节点的方法

1.获取body和head节点

2.通过ID获取元素节点

3.通过class获取元素节点

4.通过name属性获取元素节点

5.通过标签名获取元素节点

6.通过CSS选择器获取元素节点

三、操作元素的属性（html）

四、操作元素的样式属性（css样式）

五、节点操作

六、节点的属性

七、其他

总结

JavaScript中的DOM对象相关推荐

最新文章

热门文章