DOM对象的简单操作

最新推荐文章于 2022-05-21 21:26:14 发布
最新推荐文章于 2022-05-21 21:26:14 发布
阅读量401 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goodgirl1991/article/details/50377970
版权

DOM的作用就是让我们通过DOM中的方法、事件来使对web页面的操作更加容易，那么，我们就来简要的了解一下DOM的基本方法。

一、对WEB页面中相应内容的查找。

有以下两个主要函数：getElementById("id名")和getElementsByTagName("标签名")他们分别通过id名和标签名来进行查找，函数的返回值为NodeList（节点列表），代码示例如下：

WEB页面代码

<html>
<head>
	<title>Introduction to the DOM</title>
</head>
<body>
	<h1>Introduction to the DOM</h1>
	<ul>
		<li id="everywhere">It can be found everywhere.</li>
		<li class="test">It's easy to use</li>
		<li class="test">It can help you</li>
	</ul>
</body>
</html>
查找web内容代码 

document.getElementById("everywhere")<!--查找id名为everywhere的web内容-->
document.getElementsByTagName("h1")[0]<!--查找标签名为h1的web内容-->

以上例子都是在整个web页面范围内寻找，若想要在指定上下文中寻找，即缩小查找范围，则通过传入上下文元素来实现，代码示例：

(elem||document).getElementsByTagName(name);<!--其中elem为上下文元素-->

那么我们为什么要查找这些内容呢，首先，可能是为了改变这些web内容的css格式呀。以下为示例代码，实现了对指定内容css格式的改变。 

var li=document.getElementsByTagName("li");
for(var j=0;j<li.length;j++){
	li[j].style.border="1px solid #000";
}
通过以上代码，将web页面中所有li标签内容加上了边框。 
document.getElementById("everywhere").style.fontWeight='bold';
通过以上代码，将第一个li元素即id为everywhere的文本加粗。



goodgirl1991
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
操作DOM对象（重点）
qq_46423017的博客
09-28 350
1、DOM是什么： 2、核心 DOM分层： 3、获得dom节点 4、更新DOM节点 更新节点 操作文本 操作css 可以通过JavaScript去改变样式 5、删除DOM节点 删除节点 6、创建插入DOM节点 插入节点 创建一个新的标签 insertBefore
DOM操作
lu__lala的博客
10-16 402
DOM core(DOM核心操作) DOM core定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML。XML DOM定义了一套标准的针对XML文档的对象。HTML DOM定义了一套标准的针对HTML文档的对象。 HTML-DOM 使用JavaScript和DOM为HTML文档写脚本时，有许专属的HTML-DOM属性。 CSS-DOM CSS-DOM是针对CSS的操作 节点与节点之间的关系 整个文档是一个文档节点。 每个HTML标签是一个元素节点
简单的DOM操作
骐骏的专栏
11-21 778
1.几个常用的dom操作函数         1)appendChild();         2)insertBefore(newNode,posNode)         3)replaceChild(newNode,oldNode)         4)removeChild(node)  要想是i用这几个方法必须先取得父节点(使用parentNode属性) 2.两个所有类型的节
DOM对象操作
Candycandyma的博客
04-16 214
DOM DOM:文档对象模型 Document Object Model，JS可以通过DOM来操作HTML网页。 节点：构成HTML文档最基本的单元。 常用节点分成四类：文档节点：整个HTML文档；元素节点：HTML文档中的HTML标签；属性节点：元素的属性；文本节点：HTML标签中的文本内容。 <body> <button id="btn">我是一个按钮</but...
操作DOM对象
LIAO_YUANLONG的博客
01-07 110
核心 浏览器网页就是一个Dom树形结构 更新： 更新Dom节点 遍历dom节点： 得到Dom节点 删除： 删除一个Dom节点 添加：添加一个新的Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点 <div id="father"> <h1>标题1</h1> <p id="p1">p1</p> <p id="p2">p2</p> </div> <script>.
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先，我们需要明确什么是jQuery对象和DOM对象。DOM对象是原生的JavaScript对象，例如document中的各种元素，...
jQuery对象与DOM对象之间的相互转换
12-04
操作非常简单，只需将DOM对象传递给jQuery构造函数即可： ```javascript var cr = document.getElementById("cr"); // DOM对象 var $cr = $(cr); // jQuery对象 ``` 在这里，`$(cr)`将DOM对象`cr`转换为jQuery对象...
jQuery对象与DOM对象之间的转换方法
10-29
jQuery对象转换为DOM对象相对简单。因为jQuery对象本质上是一个封装了DOM对象的数组，所以可以通过索引的方式来获取。一般情况下，使用`[index]`或`.get(index)`方法来实现这一转换： ```javascript var $jQuery...
jquery对象与DOM对象转化
12-03
转化DOM对象为jQuery对象非常简单，只需要将DOM对象用`$()`包裹起来即可。这是因为`$()`函数不仅可以用于选择元素，还可以接受一个DOM元素或一组DOM元素作为参数。例如： ```javascript var div = document....
Jquery对象和Dom对象的区别分析
10-25
反之，当需要对DOM对象使用jQuery的方法时，可以使用jQuery的包装函数$()，把DOM对象包装成jQuery对象，如$(DOM对象)。 3. jQuery对象与DOM对象的方法使用差异 在使用方面，jQuery对象和DOM对象有着明显的不同： ...
JavaScript(Dom对象的操作)
Mordle
11-02 589
Dom对象的操作核心获得Dom节点更新节点实战演练删除Dom节点插入节点把已有的标签进行插入创建一个新的标签,实现插入在子节点前插入(insertBefore) 核心 浏览器网页就是一个Dom树形结构   更新：更新Dom节点   遍历Dom节点：获得Dom节点   删除：删除一个Dom节点   添加：添加一个新的节点 要操作一个Dom节点,就必须要先获得这个Dom节点 获得Dom节点 <body> <div id="div1"> <h1 id="h">&
dom对象操作属性
noveling的博客
05-07 799
获取属性dom对象.属性名获取自定义属性dom对象.getAttribute("自定义")修改自定义属性dom对象.setAttribute("自定义属性" "修改属性")移除自定义属性 dom对象.removeAttribute("自定义")获取dom对象文本dom对象.innerText获取文本节点dom对象.innerHTML获取包含标签内容dom对象.outerHTML...
DOM对象-对元素进行操作
yyy_wj的博客
07-21 295
属性操作 非表单元素的属性 href、title、id、src、className var link = document.getElementById('link'); console.log(link.href); console.log(link.title); var pic = document.getElementById('pic'); console.log(pic....
dom相关对象及操作
www658的博客
05-18 142
js
JavaScript——DOM对象的节点操作
零怀念的博客
08-13 802
获取DOM对象 1.利用id：document.getElementById() 2.利用标签：document.getElementsByTagName();（一个标签名称可以有多个Element，所以这里返回的是集合） 3.利用class：document.getElementsByClassName();（多个元素可以有相同的class，所以这里返回的是集合） 4.利用表单名称：do...
Html5使用Dom对象进行操作
MissGentlemen的博客
12-01 759
.div{     width: 300px;     height: 500px;     }       体育 英语 数学 语文 美术 音乐       document.addEventListener('plusready', function(){     //console.log("所有plus api都应该在此事件发生后调
【JS】操作HTML DOM对象
weixin_39068791的博客
05-19 329
引言HTML DMO将HTML文档表示为一棵DOM对象树，每个节点对象表示文档的特定部分，因此通过修改这些对象，就可以动态改变页面元素的属性；而通过添加、删除、替换、复制特定的节点，就可以为页面动态添加、删除、替换、复制相应的页面元素。处理元素的属性(1)getAttribute(name)：访问元素属性(2)setAttribute(name,value)：修改元素属性(3)removeAttr...
DOM对象的基础用法
PlayBoyH的博客
04-03 282
js（javascript）分为三大部分： 1.js的基础语法（也就是ECMAScript，简称为ES6）。 2.DOM：document object model。 3.BOM：浏览器为对象。 html页面中都有一元素。html标签就是根。 文档：一个页面就是一个文档。 元素：（element）页面中所有的标签都是元素。每个标签都是一个元素。 节点：页面的所有内容都是节点。 root：根/ ...
Js中DOM操作详解
前端成长之路
05-21 3830
一、DOM是什么 DOM：（Document Object Model）即文档对象模型。是W3C定义的访问文档的标准，他允许程序动态地访问、更新文档的内容、结构和样式； 二、元素获取 更改文档内容，首先需要获取元素对象，常见的获取元素的方法有标签，ID，类名等等； 1.ID获取元素； 通过ID获取是最方便的方式之一，但是一次只能获取一个，ID重复时，只获取第一个，对于需要大量获取的不太适用； document.getElementById('ID') 2.标签获取元素； 通过标签可以获取指定标签的全部
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值