DOM操作-1

最新推荐文章于 2024-07-10 14:03:37 发布

清小福

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量234

点赞数

分类专栏：前段文章标签： javascript

本文链接：https://blog.csdn.net/qingxiaofu/article/details/106042132

版权

前段专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树

DOM树

在这里插入图片描述

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

一、查找HTML元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

1、通过 id 查找 HTML 元素

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

本例查找 id=“intro” 元素：

var x=document.getElementById("intro");

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

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

2、通过标签名查找 HTML 元素

本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有 <p>元素：
实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3、通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素：
实例

var x=document.getElementsByClassName("intro");

二、HTML DOM - 改变 HTML

1、改变 HTML 内容（innerHTML/innerText）

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容：
实例

<html>
<body>
	<p id="p1">Hello World!</p>
<script>
	document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>

实例讲解：
上面的 HTML 文档含有 id=“p1” 的 <p> 元素，我们使用 HTML DOM 来获得 id=“p1” 的元素，JavaScript 更改此元素的内容 (innerHTML)。

document.getElementById(id).innerText=新的文本内容

注意：

innerHTML是可以获取节点内标签和内容
innerText 只能获取节点内的文本内容
innerHTML可以设置html和文本一起的内容 HTML标签会被浏览器所解析
innerText不可以设置html和文本一起的内容 HTML标签不会被浏览器所解析

2、改变 HTML 属性 (attribute)

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了 <img> 元素的 src 属性：

<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<img src="http://img.zcool.cn/community/01f9ea56e282836ac72531cbe0233b.jpg@2o.jpg" onclick="this.src='http://pic.58pic.com/58pic/13/80/78/35V58PICrWD_1024.jpg'" alt="">

注意：在jQuery里不能改变input的type类型出于安全性，只能是只读如更改input的type

js设置密码的显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function pas() {
            var i = document.getElementsByTagName('input')[0];
            i.type = 'password'
        }

        function text() {
            var i = document.getElementsByTagName('input')[0];
            i.type = 'text'
        }
    </script>
</head>
<boby>
    <input type="text" value="" name="xxx">
    <button onclick="pas();">更改为密码</button>
    <button onclick="text();">更改为文本显示</button>
</boby>
</html>

三、HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

1、改变 HTML 样式（style.property）

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
  <p id="p1">Hello World!</p>
  <p id="p2">Hello World!</p>
<script>
  document.getElementById("p2").style.color="blue";
  document.getElementById("p2").style.fontFamily="Arial";
  document.getElementById("p2").style.fontSize="larger";
</script>
	<p>以上段落通过脚本修改。</p>
</body>
</html>

获取生效style样式

window.getComputedStyle(“元素”, “伪类”);

style = window.getComputedStyle(box, null);    //支持IE9+及非IE浏览器

style = window.getComputedStyle(box, null).width;获取box的width属性值

和style区别

 box.style.xxx 只能获取内联样式
 getComputedStyle 获取的生效样式可以获取全局的样式

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #style0{
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        window.onload = function (ev) {
            var style1 = document.getElementById('style0');
            console.log(style1.style.backgroundColor);
            console.log(style1.style.width);
            var style2 = window.getComputedStyle(style1,null);
            console.log(style2.width);
            console.log(style2.height);
            console.log(style2.backgroundColor);
        }
    </script>
</head>
<boby>
    <div id="style0" style="background-color: red;"></div>
</boby>
</html>

新手坑：
window.getComputedStyle(style1,null) 中的style1必须是document.getElementById(‘style0’)的结果

设置多个css样式

1.设置cssText

element.style.cssText = "样式1;样式2..."
div.style.cssText = 'width:200px;height: 200px;background-color: red';

2.设置style的属性

element.setAttribute('style', 'height: 100px !important');

设置id或者class名称

//设置id
element.setAttribute('id, 'id名称');
element.id = id名称；
//设置class
element.setAttribute('class, 'class名称');
element.className = class名称；
设置多个class
element.className = '样式1 样式2';
element.setAttribute('class','样式1 样式2')

3.通过add方法添加多个类名

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

classList
classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

2、使用事件

HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：

元素被点击
页面被加载完成
输入框被修改

在接下来的章节，你会学到更多关于事件的知识。
本例改变了 id=“id1” 的 HTML 元素的样式，当用户点击按钮时：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<boby>
    <h1 id="id1">我的标题</h1>
    <button type="button" onclick="document.getElementById('id1').style.color = 'red'">点击我变为红色</button>
</boby>
</html>

清小福

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作-1

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树DOM树通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应一、查找HTML元素通常，通过 Java
复制链接

扫一扫