星星博客 »  > 

JavaScript操作——HTML DOM

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>

 

相关文章