JavaScript操作——HTML DOM

最新推荐文章于 2024-05-17 13:52:13 发布

夜·封尘

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量130

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/qq_49032349/article/details/117753676

版权

HTML DOM介绍

HTML DOM是W3C（万维网联盟）制定的关于HTML的标准。

HTML DOM（ Document Object Model ），即文档对象模型，它定义了访问和操作 HTML 文档的标准方法(接口)，还以树状结构表达 HTML 文档。

在HTML DOM中，所有事物都是节点，整个HTML就是以节点构建的一个DOM树，整个 HTML 文档是一个文档节点，每个 HTML 元素是元素节点，每个 HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点。根结点：最顶端结点称为根结点，其没有父节点，如：<html>；父节点：其可以拥有子节点，如：<head>；子节点：父节点下一级的节点；同胞节点：拥有相同父节点的同级节点，如：<head>与<body>

<html> //根节点，无父节点
    <head> //<html>的子节点
         <meta charset="utf-8">
    <title>ShiXun</title>//<head>的子节点
  </head>  
    <body>   //<html>的子节点 
        <h2>实训在线</h2>  //<body>的子节点  
        <p>Hello Web!</p> //<body>的子节点 
    </body>
</html>

JavaScript 访问 DOM 元素

可以利用以下JavaScript方法获取DOM信息：

document.getElementById() 方法

 <h1 id="title">JS访问DOM</h1>    
    
<script type="text/javascript">    

//获取 id="title" 的元素    
var title = document.getElementById("title");  
  
// 打印 title 元素的内容    
document.write("打印输出：" + title.innerHTML);   
 
</script>

document.getElementsByName() 方法

<input type="text" name="user" value="zhangsan1">
<input type="text" name="user" value="zhangsan2">

<script type="text/javascript">    

//获取 name="user" 的所有元素(数组)    
var users = document.getElementsByName("user");    
// 打印 users 数量    
document.write("数量：" + users.length);    document.write("<br>");    
// 打印值    
document.write(" 第一个值：" + users[0].value);
document.write(" 第二个值：" + users[1].value); 

</script>

运行结果：

JavaScript 修改 DOM 元素

利用 JavaScript 可以修改以下 DOM 信息：

1. HTML 元素内容

2. CSS 样式

3.HTML 元素属性

4. HTML 元素

修改元素内容

 <h1 id="title">JS访问DOM</h1>
        
<script type="text/javascript">    

//获取 id="title" 的元素，并修改其内容    document.getElementById("title").innerHTML = "Hello";    

</script>

修改元素样式

<h1 id="title">JS访问DOM</h1>    

<script type="text/javascript">
   //获取 id="title" 的元素        
    var title = document.getElementById("title");     
   
    //修改其颜色        
    title.style.color = "red";        

    //修改其字体大小        
    title.style.fontSize = "46px";    
</script>

夜·封尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作——HTML DOM

HTML DOM介绍HTML DOM是W3C（万维网联盟）制定的关于HTML的标准。HTML DOM（ Document Object Model ），即文档对象模型，它定义了访问和操作 HTML 文档的标准方法(接口)，还以树状结构表达 HTML 文档。...
复制链接

扫一扫