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>

获取节点:
JavaScript 更新Dom节点_第1张图片

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

id1.innerText='456123789'
'456123789'

截图:
JavaScript 更新Dom节点_第2张图片

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

截图:

在这里插入代码片JavaScript 更新Dom节点_第3张图片

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

截图:

JavaScript 更新Dom节点_第4张图片

此时浏览器的效果:

JavaScript 更新Dom节点_第5张图片

大家看,我们加一个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>

看一下浏览器效果:

JavaScript 更新Dom节点_第6张图片

我们在浏览器上输入:

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

截图:
JavaScript 更新Dom节点_第7张图片

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

JavaScript 更新Dom节点_第8张图片

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

截图:
JavaScript 更新Dom节点_第9张图片

此时的浏览器的页面效果截图:
JavaScript 更新Dom节点_第10张图片
(这里不好意思,放太大了,效果是一样的)

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

'2em'

截图:

JavaScript 更新Dom节点_第11张图片

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

JavaScript 更新Dom节点_第12张图片

我们来实际做一下

JavaScript 更新Dom节点_第13张图片

JavaScript 更新Dom节点_第14张图片

1.打开百度

2.点击键盘上的F12键

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

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

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

  1. 找 id=“su” 这个字样

接下来截图:

JavaScript 更新Dom节点_第15张图片

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

截图:
JavaScript 更新Dom节点_第16张图片

在这里插入图片描述
这样我们就完成了,字体的位置已经更改了。

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

你可能感兴趣的:(javascript,前端,开发语言,更新Dom节点)