JavaScript入门（七） - DOM操作

最新推荐文章于 2022-06-13 11:14:19 发布
最新推荐文章于 2022-06-13 11:14:19 发布
阅读量296 收藏
点赞数 1
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011712163/article/details/53332233
版权

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


一、通过id获取元素

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

语法:

 document.getElementById(“id”)

二、innerHTML熟悉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
</head>
<body>
    <h1 id="con">javascript</h1>
    <script type="text/javascript">
        /*
         innerHTML 属性用于获取或替换 HTML 元素的内容。

         语法:
         Object.innerHTML

         注意:
         1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

         2.注意书写，innerHTML区分大小写。
         */
        var mychar = document.getElementById("con");
        document.write("原标题：" + mychar.innerHTML + "<br>");
        mychar.innerHTML = "JAVASCRIPT";
        document.write("修改后的标题：" + mychar.innerHTML);
    </script>
</body>
</html>

三、改变 HTML 样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
</head>
<body>
    <h1 id="con">javascript</h1>
    <script type="text/javascript">
        /*
         innerHTML 属性用于获取或替换 HTML 元素的内容。

         语法:
         Object.innerHTML

         注意:
         1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

         2.注意书写，innerHTML区分大小写。
         */
        var mychar = document.getElementById("con");
        document.write("原标题：" + mychar.innerHTML + "<br>");
        mychar.innerHTML = "JAVASCRIPT";
        document.write("修改后的标题：" + mychar.innerHTML);

        /*
         改变 HTML 样式

         HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

         语法:
         Object.style.property=new style;

         注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

         基本属性表（property）:
         
         注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
         */
        mychar.style.color="red";
        mychar.style.backgroundColor="#ccc";
        mychar.style.width="300px"
    </script>
</body>
</html>

四、显示和隐藏（display属性）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
</head>
<body>
    <h1 id="con">javascript</h1>
    <script type="text/javascript">
        /*
         innerHTML 属性用于获取或替换 HTML 元素的内容。

         语法:
         Object.innerHTML

         注意:
         1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

         2.注意书写，innerHTML区分大小写。
         */
        var mychar = document.getElementById("con");
        document.write("原标题：" + mychar.innerHTML + "<br>");
        mychar.innerHTML = "JAVASCRIPT";
        document.write("修改后的标题：" + mychar.innerHTML);

        /*
         改变 HTML 样式

         HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

         语法:
         Object.style.property=new style;

         注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

         基本属性表（property）:
         
         注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
         */
        mychar.style.color="red";
        mychar.style.backgroundColor="#ccc";
        mychar.style.width="300px"

        /*
         显示和隐藏（display属性）

         网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

         语法：
         Object.style.display = value

         注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

         value取值:
         
         */
        function hidetext(){
            var mychar = document.getElementById("p");
            mychar.style.display = "none";
        }
        function showtext(){
            var mychar = document.getElementById("p");
            mychar.style.display = "block";
        }

        /*
        控制类名（className 属性）

        className 属性设置或返回元素的class 属性。

        语法：
       object.className = classname
       var p1 = document.getElementById("p1");
       p1.className="one";

       作用:
       1.获取元素的class 属性
       2. 为网页内的某个元素指定一个css样式来更改该元素的外观
 */
      </script>
 <p id="p" style="color: #35ab1d;background-color: antiquewhite;width: 200px">大家好我是军哥！</p>
 <form>
 <input type="button" οnclick="hidetext()" value="隐藏内容" />
 <input type="button" οnclick="showtext()" value="显示内容" />
 </form></body></html>



goldmei88
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
＜前端路由原理＞react-router-dom入门级教程
Coding and studying
07-06 3946
1. 什么是路由？2. 路由分类前端路由依靠的是浏览器的BOM对象中的history，也就是浏览器的历史记录（history）。但我们一般不直接操作BOM身上的history，而是借助history.js去操作BOM。history模式的路由： hash模式的路由：（地址栏中带有 # 号） 浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。浏览器的历史记录（history）是一个栈的结构。重要是事情说三遍。每当执行push操作时，都是将path推入栈顶，浏览
dom7：具有jQuery兼容API的用于DOM操作的简约JavaScript库
02-02
Dom7 具有jQuery兼容API的用于DOM操作的简约JavaScript库 Dom7-是默认的DOM操作库内置 。 它利用大多数边缘和高性能方法进行DOM操作。 您不需要学习任何新知识，它的用法非常简单，因为它具有与众所周知的jQuery库相同的语法，并支持最流行和广泛使用的方法以及类似jQuery的链接。 有关用法示例和可用方法，请参见文档。 建立 您将需要在系统上安装Node.js。 首先，安装所有必需的依赖项 $ npm install 要构建开发版本： $ npm run build:dev 结果文件为： buid / dom7.js buid / dom7.module.js 要构建生产（最小化）版本： $ npm run build:prod 结果文件为： dist / dom7.js dist / dom7.min.js dist / dom7.module.js
JavaScript学习7：DOM基础
爱技术 爱生活
05-31 1725
DOM的全称为DocumentObject Model，即文档对象模型，是针对HTML和XML文档的API。它描绘了一个具有层次结构的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM是由Netscape及微软公司创始的DHTML发展而来的，但是现在它已经成为了表现和操作页面的真正跨平台的、语言中立的方式。 一．对DOM的理解 DOM中的三个字母，D可以理解为整个Web加载的网页文档；
JavaScript动态创建DOM（七）
AI浩
06-02 5904
动态创建DOM document.write只能在页面加载过程中才能动态创建。 可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild();方法将新创建元素添加到相应的元素下。//父元素对象.removeChild(子元素对象);删除元素。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title&gt...
JavaScript 基础（七）【DOM】
山水一程
03-30 530
DOM元素与节点输出改变元素获取元素改变内容改变属性改变样式增删元素响应事件事件汇总 元素与节点 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 Js通过操作dom来控制页面 Js操作的不只是元素，还包括元素的属性、内容、元素外的文本等等，所以Js的dom对象对页面进行了更详细的划分，称为节点。 在 HTML DOM （文档对象模型）中，每个部分都是...
Dom7.js 源码阅读备份
weixin_30778805的博客
02-14 160
在Framework7，其特色的HTML框架，可以创建精美的iOS应用; 她有自己的 DOM7 - 一个集成了大部分常用DOM操作的高性能库。你不需要学习任何新的东西，因为她的用法和大名鼎鼎的jQuery几乎是一样的，包括大部分常用的方法和jquery风格的链式调用。去查看了一下dom7.js的源码，发现非常适合学习； 源码如下： /*==========================...
JavaScript入门篇--DOM操作
SunMoonJP的博客
02-22 814
认识DOM文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 先看看下面代码：将HTML代码分解为DOM节点层次图：HTML文档可以说由节点构成的集合，三种常见的DOM节点： 1.元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。 2.文本节点：向用户展
JavaScript-DOM操作
qq_56045326的博客
06-13 492
Javas_DOM操作
combining-html-and-javascript-plus-dom
05-19
结合HTML和JavaScript + DOM Lab 入门 分叉此回购 克隆分叉的存储库 cd到克隆它的目录 npm install安装依赖项 npm test打开赛普拉斯测试窗口 注意：请记住定期进行git add ， git commit和git push 提交准则 完成后...
react-native-dom:如何使用react-native-dom在Web浏览器中运行React Native应用程序
05-09
与DOM兼容的生态系统逃生舱口盖：使用相同的本机模块桥，以更通用的方式公开DOM特定的API，可以轻松地将其制成跨平台模块。 预习 入门 要获得React-native入门方面的帮助，请查看在线。 1. 2.克隆存储库 $ http
beg-javascript-w-dom-scripting-ajax:Christian Heilmann的“使用DOM脚本和Ajax开始JavaScript”的源代码-ajax source code
03-25
该存储库随附了Christian Heilmann撰写的入门 （Apress，2006年）。 使用绿色按钮将文件下载为zip格式，或使用Git将存储库克隆到您的计算机上。 发行版 版本v1.0对应于已出版书籍中的代码，没有更正或更新。 会费 ...
Dom7(动态创建标签,获取页面元素)
xbc1213的博客
01-25 2075
动态创建标签关键字:wirite 语法:document.write(‘内容’); 注意:该方法可以动态创建标签,里面的内容可以直接写标签语句.可以用作镶嵌广告,如果在页面加载后执行,那么页面的其他标签都将会小时. 实例: <script type="text/javascript"> onload=function(){ //第一个作用,可以动态创建标签
vue打包显示Dom7报错(swiper引入版本为4)
海北军
06-26 5677
解决方法：引入swiper低于4版本（3.4.2版本即可）
js系列教程7-DOM操作全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-09 4681
全栈工程师开发手册 （作者：栾鹏） 快捷链接： js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算法全解 js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js系列教程8-事件全解 js系列教程9-表单元素全解 js系列教程10-canvas绘图全解 js系列教程
JavaScript入门（五） - 关闭窗口（window.close）
goldmei一枝梅的专栏
11-24 1308
html lang="en"> head> meta charset="UTF-8"> title>关闭窗口title> script type="text/javascript"> /* close()关闭窗口 用法： window.close(); //关闭本窗口 或
JavaScript入门（四） - 打开新窗口（window.open）
goldmei一枝梅的专栏
11-24 874
html lang="en"> head> meta charset="UTF-8"> title>打开新窗口title> script type="text/javascript"> /* open() 方法可以查找一个已经存在或者新建的浏览器窗口。 语法： window.open([URL], [
JavaScript入门（一） - 警告（alert 消息对话框）
goldmei一枝梅的专栏
11-24 802
html lang="en"> head> meta charset="UTF-8"> title>警告消息对话框title> script type="text/javascript"> /* JavaScript-警告（alert 消息对话框） 我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文
JavaScript入门（二） - 确认（confirm 消息对话框）
goldmei一枝梅的专栏
11-24 606
html lang="en"> head> meta charset="UTF-8"> title>确认消息对话框title> script type="text/javascript"> /* confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。 语
JavaScript入门（三） - 提问（prompt 消息对话框）
goldmei一枝梅的专栏
11-24 555
html lang="en"> head> meta charset="UTF-8"> title>提问消息对话框title> script type="text/javascript"> /* prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。
javascript DOM操作入门与元素添加详解
"本文档是一篇关于JavaScript DOM操作的基础知识总结，主要针对那些经常利用JavaScript处理文档对象模型(DOM)的开发者。DOM是HTML和XML文档的标准接口，允许动态地访问和修改网页内容。本文将详细介绍如何使用DOM...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值