javascript之DOM简介

2021-02-06 16:42:26 169

DOM文档对象模型是基于HTML树的api，这里可以把HTML结构看成是一颗树形结构，使用DOM可以操作树中的节点，即操作（增删改查）HTML标签。

上图是一个简单的DOM树形结构图，可以使用document对象获取DOM，这个对象是window对象下的，在使用时，可以省略window。可以把一个HTML标签看做是一个对象，标签中的属性对应的就是对象中的属性，DOM提供了访问他们的方法。

getElementById根据html标签的id来获取标签对象：





getElementById


    
        姓名：
        

        密码：

getElementsByName根据html标签的name来获取一个数组对象，在html标签中name值是可以重复的，所以该方法会返回一个数组对象：





getElementsByName


    
        input：
        

        input：
        

        input：

replaceNode替换节点





replaceNode


    
        input：
        

        input：
        

        input：

getAttribute获取标签中的属性，除了使用对象名.属性名的方式来获取属性之外还可以使用getAttribute()方法来获取指定的属性值。





getAttribute


    
        姓名：
        

        密码：

setAttribute给对象添加属性，如下代码，3秒后给div添加style属性将字体设置为红色：





setAttribute


    好好学习javascript

createElement可以创建一个标签，createTextNode向标签中添加文本，如下代码，向下拉框中添加一个选项：





createElement

insertBefore在指定位置之前插入标签。





insertBefore

removeChild删除指定元素。





removeChild

大部分浏览器中都支持innerHTML，但是他不是DOM标准的组成部分。可以使用innerHTML获取对象的内容。





innerHTML


    
    
        数学
        语文
    
    
    好好学习java

海报

169