认识DOM 反选特效确认框改变 HTML 样式显示和隐藏（display属性）

本文链接：https://blog.csdn.net/weixin_42793426/article/details/90774521

本文介绍了DOM的基本概念，包括通过ID和标签名获取元素，利用length属性、for循环以及innerHTML属性操作内容。重点讲解了如何改变HTML样式，如调整颜色、字号和背景色，以及使用display属性实现显示和隐藏效果。此外，还探讨了通过className属性控制元素的类名，实现样式的添加和更改。

摘要由CSDN通过智能技术生成

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li></li>中的HTML、CSS、JS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.itxdl.cn/"。

看下面代码:

<a href="http://www.itxdl.cn">HTML CSS JS</a>

通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

语法:

通过元素ID获取元素:document.getElementById(“id”) 
                 document -- 文件
                 get -- 获取
                 Element -- 元素
                 By -- 通过
                 Id -- id属性

看看下面代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id</title>
</head>
<body>
    <h3>hello</h3>
    <p id="con">I love you</p>

</body>
<script>
    var mye = document.getElementById("con");
    document.write(mye);
</script>
</html>

结果:

注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

通过带有指定标签名的对象的集合获取元素

语法:

document.getElementsByTagName(tagname)

参数

参数	类型	描述
tagname	String	必须。你要获取元素的标签名。

返回值

类型	描述
NodeList 对象	指定标签名的元素集合

DOM length 属性

定义和用法

length 属性可返回表单中元素的数目。

语法

formObject.length

看看下面代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对象集</title>
    
</head>
<script type="text/javascript">
    function getElements()
    {
      var x=document.getElementsByTagName("input");
      alert(x.length);
    }
</script>

<body>
用户名:<input name="myInput" type="text" /><br />
密码:<input name="myInput" type="text" /><br />
邮箱:<input name="myInput" type="text" /><br />
<br />
<input type="button" οnclick=&#