第四章第二天JavaScript DOM简介

原创于 2018-08-23 18:58:02 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解了使用DOM获取页面元素的四种主要方法：通过ID、名称、标签名和类名获取元素。同时，介绍了如何利用innerHTML和innerText属性操作元素内容，以及如何修改节点属性和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM获取页面的元素

getElement系列访问

通过DOM获取页面的元素的三种方式：

getElementById( )方法访问DOM元素—》 id获取一个元素，通过 id 查找 HTML 元素

getElementsByName( )方法访问DOM元素—》元素的name属性名获取(数组)，可返回带有指定名称的对象的集合

getElementsByTagName( )方法访问DOM元素 –》元素的名称获取(数组)，通过标签名查找 HTML 元素，语法同上

getElementsByClassName()方法访问DOM元素 –》类样式名称获取(数组)，通过类名找到 HTML 元素，语法同上

var pp = document.getElementById("p1");
alert(pp.innerHTML);
//innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记
pp.innerHTML = pp.innerHTML+'追加的内容';
//追加内容，覆盖原内容
//divA.innerHTML +='追加的内容s';
pp.innerHTML = pp.innerHTML+'<h3>追加内容为H3字体</h3>';
var html = document.getElementById("p2").innerHTML;
//追加内容，不覆盖原内容

innerText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本

var name=document.getElementsByName("text1");
for(var i=0;i>name.length;i++){
    alert(name[i].value());//遍历数组
}

操作节点的属性

getAttribute("属性名") 获得属性名

setAttribute("属性名","属性值") 获得属性名后，改这个属性名的值

操作节点样式

style属性

className属性

document.getElementById("h11").style.color="red";

var p=document.getElementById("id1");
p.className="p1";//p1是css样式