侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

javaScript的DOM

2023-12-08 星期五 / 0 评论 / 0 点赞 / 81 阅读 / 1923 字

DOM是Document Object Model的缩写,简称文档对象模型 通过HTMLDOM,可访问 JavaScript HTML 文档的所有元素。 一、访问HTML元素节点 1.通过 id 访

DOM是Document Object Model的缩写,简称文档对象模型

 

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

一、访问HTML元素节点

1.通过 id 访问 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

使用document.getElementById方法访问HTML元素

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。

2.通过标签名访问 HTML 元素

document.getElementsByTagName

3.通过类名访问 HTML 元素

document.getElementsByClassName

 

<head>

<title></title>

<p id="demo" class="hello">你好</p>

<p id="test">世界</p>

<script type="text/javascript">

//id

var p1=document.getElementById("demo");

console.log(p1);

var res1=p1.innerHTML;

console.log(res1);

//标签名

var p2=document.getElementsByTagName("p");

console.log(p2);

var res2=p2[1].innerHTML;

console.log(res2);

//类名

var p3=document.getElementsByClassName("hello");

var res3=p3[0].innerHTML;

console.log(res3);

</script>

三、改变HTML内容

1.改变 HTML 输出流

通过document.write直接改变HTML页面的内容

document.write("hello");

 

2.改变 HTML 内容

通过innerHTML属性直接修改HTML的内容

document.getElementById("demo").innerHTML="51code";

 

3.改变HTML样式

document.getElementById("test").style.background="red";

广告 广告

评论区