JavaScript 更新Dom节点

大家好，今天我们来分享一下JavaScript 更新Dom节点

看源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="id1"></div>
<script>var id1 =document.getElementById('id1');   //这样获取到节点</script></body>
</html>

获取节点：

打开浏览器控制台，修改文本的值

id1.innerText='456123789'
'456123789'

截图：

看一下此时浏览器上的网页

截图：

在这里插入代码片

id1.innerHTML='<strong> 456123789</strong>'
'<strong> 456123789</strong>'
//可以解析成HTML文本标签

截图：

此时浏览器的效果：

大家看，我们加一个strong标签（字体加粗的效果）之后，指定的文本内容变粗了

注意区别于上次的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="id1"></div>
<script>var id1 =document.getElementById('id1');id1.innerText='shuaige'
</script></body>
</html>

看一下浏览器效果：

我们在浏览器上输入：

id1.style.color ='red';
'red'

截图：

此时的浏览器的页面效果截图：

id1.style.fontSize='200px';     //更改字体样式的大小

截图：

此时的浏览器的页面效果截图：

（这里不好意思，放太大了，效果是一样的）

id1.style.padding='2em';    //更改它的内边距'2em'

截图：

此时的浏览器的页面效果截图：

我们来实际做一下

1.打开百度

2.点击键盘上的F12键

3.点击截图当中第二个红箭头所指的地方

4.点击“百度一下”的字样

5.看第四个箭头所指的地方

找 id=“su” 这个字样

接下来截图：

var ss =document.getElementById('su');
undefined
ss.style.padding ='10px'
'10px'

截图：

这样我们就完成了，字体的位置已经更改了。

好了，有关于JavaScript 更新Dom节点就到这里了，谢谢大家

JavaScript 更新Dom节点相关推荐

JavaScript-操作DOM对象-更新dom节点
更新dom节点 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
JavaScript 插入Dom节点
大家好,今天我们来分享JavaScript 插入Dom节点首先我们要知道, 不管我们对Dom节点进行什么样的操作,都必须先获取这个节点,假如说,这个dom节点是空的,我们可以通过innerHTML就 ...
【JavaScript】DOM节点-创建、插入、删除、替换、克隆节点
文章目录 DOM节点创建节点 1. 创建元素节点 2. 创建文本节点插入节点 1. appendChild() 2. insertBefore() 删除节点 1. removeChilde() 2 ...
【Javascript】 DOM节点
HTML文档中一切都是节点! 整个文档是文档节点: 注释是注释节点: 每一个HTML元素都是一个元素节点: 元素内的文本内容是文本节点: 连元素的每一个属性都是一个属性节点. 看到这些是不是感觉很熟悉 ...
java dom 获得子元素_在JavaScript中删除DOM节点的所有子元素
我将如何删除JavaScript中DOM节点的所有子元素? 说我有以下(丑陋的)HTML: hello world 我抓住了我想要的节点,如下所示: var myNode = document.get ...
Javascript元编程创建DOM节点
在使用javascript创建DOM节点的过程中,难免要使用document.createElement.setAttribute. document.createTextNode等冗长.还有浏览器兼 ...
VUE双向绑定的原理（简单版）+虚拟DOM 节点的创建和更新
手动敲敲代码,就很容易理解了,供参考 1.以下是VUE双向绑定的原理(简单版) 主要是监听和defineProperty实现简单的双向绑定 <html><head></h ...
JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点更新:更新Dom节点添加:添加一个新的节点删除:删除一个Dom节点要操作一个Do ...
JavaScript-操作DOM对象-获得dom节点
核心浏览器网页就是一个Dom树形结构! 更新: 更新Dom节点遍历dom节点:得到Dom节点删除: 删除一个Dom节点添加: 添加一个新的节点要操作一个Dom节点,就必须要先获得这个Dom节 ...
【JavaScript】DOM笔记（随缘更新ing）
文章目录 JavaScript DOM笔记 1.DOM:文档对象模型 1.1. Node类型 1.1.1.nodeName与nodeValue 2.Document类型 2.1.获取元素 2.1.1. ...

JavaScript 更新Dom节点

JavaScript 更新Dom节点相关推荐

最新文章

热门文章