DOM-（Document Object Model）即文档对象模型。

JavaScript可以动态地修改DOM，从而来修改HTML的内容。

查找HTML元素

  • 通过 id 找到 HTML 元素

  • 通过标签名找到 HTML 元素

  • 通过类名找到 HTML 元素

设置样式总结：

  • className:用于为DOM元素直接添加一个样式类

  • style:用于为DOM元素添加某一个样式值，注意驼峰写法

  • styleText:用于为DOM元素一次添加多个样式

创建和增加节点:

  • createElement():创建节点

  • appendChild():末尾追加方式插入节点

  • insertBefore()在指定节点前插入新节点

  • cloneNode():克隆节点

相关练习代码：

动态添加内容

  1.     <script type="text/javascript">
  2.         window.onload = function() {
  3.             var d = document.getElementById('d');
  4.             //创建一个节点,里面是节点标签的名字
  5.             //定义个变量，等于创建好的标签，然后在再向其中添加内容
  6.             var a = document.createElement('a');
  7.             a.href = '01.html';
  8.             a.innerText = '添加的新内容';
  9.             //添加元素到div里
  10.             d.appendChild(a);
  11.             //在指定节点前插入新的节点
  12.             var p = document.createElement('p');
  13.             //添加文本内容
  14.             p.innerText = "这是被添加的内容";
  15. //            d.appendChild(p);
  16.             //参数1：要添加的元素，参数2：指定节点
  17.             d.insertBefore(p,a);
  19.             //克隆节点
  20.             var span = document.getElementById(s);
  21.             //克隆元素
  22.             //cloneNode()有个参数，默认是false，修改为true，可以将原来的标签也克隆出来
  23.             var spanc = span.cloneNode(true);
  24.             d.appendChild(spanc);
  25.         }
  26.     </script>
  28. <body>
  29. <div id="d">
  30. </div>
  31. <span id="s">
  32.     span标签内的内容
  33. </span>
  34. </body>

根据层次关系查找节点

  1. <script>
  2.     window.onload = function() {
  3.         //通过id找到所需要的td
  4.         var t1 = document.getElementById('t1');
  5.         //获取父节点元素
  6.         var tr = t1.parentNode;
  7.         tr.style.backgroundColor = 'red';
  9.         //获取子节点元素
  10.         var tt3 = document.getElementById('tt3');
  11.         tr.lastElementChild;
  12.         tt3.innerText = 'blue';
  14.         //前一个元素节点
  15.         var t4 = t3.previousElementSibling;
  16.         t4.innerText = "000000";
  18.         //后一个元素节点
  19.         var t5 = t4.nextElementSibling;
  20.         t5.innerText = "XXXXXX";
  21.     }
  22. </script>
  24. <body>
  25. <table>
  26.     <tr>
  27.         <td id = "t1">1</td>
  28.         <td id = "t2">2</td>
  29.         <td id = "t3">3</td>
  30.     </tr>
  31.     <tr>
  32.         <td id = "tt1">1</td>
  33.         <td id = "tt2">2</td>
  34.         <td id = "tt3">3</td>
  35.     </tr>
  36. </table>
  37. </body>

设置样式

  1.     <script type="text/javascript">
  2.         window.onload=function(){
  3.             /*            文档就绪函数*/
  4.              var d = document.getElementById('d');
  5.             //添加文本信息
  6. /*            d.innerText = "添加文本信息";
  7.             d.innerHTML = "可以直接添加文本信息，还可以添加标签";*/
  9.             var abc = document.getElementsByName('abc');
  11.             /*错误，ByName返回的是个数组，要通过数组来选取*/abc.href = "";
  13.             /*ByName 通过数组下标得到对应元素*/
  14.             abc[0].innerText = "修改原先的内容,改变文本信息";
  16.             /*传递标签名字，给标签添加内容，该标签无ID，也无class属性*/
  17.             var span = document.getElementsByTagName('span');
  18.             span[0].innerText("添加的文本信息");
  20.             /*通过className找对应元素*/
  21.             var c =document.getElementsByClassName('c');
  22.             for(var i = 0; i < c.length; i++){
  23.                 c[i].innerText = "把它原先的内容去改变";
  24.             }
  26.             /*属性是成对出现，属性名+属性方法*/
  27.             document.getElementById("food").className = "fruit";
  28.             document.getElementById("food").style.color = "red";
  29.             document.getElementById("food").style.size = "20px";
  30.         }
  31.     </script>
  33. <body>
  34. <div id="d">
  35. </div>
  36. <a href="" name="abc">属性名字abc</a>
  37. <span>
  38. </span>
  39. </body>

JavaScript——DOM操作的更多相关文章

  1. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  3. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. Javascript DOM操作实例

          最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...

  9. javascript DOM操作 第19节

    <html> <head> <title>DOM对象</title> <script type="text/javascript&quo ...

  10. 常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

随机推荐

  1. pydub "Couldn't find ffmpeg or avconv - defaulting to ffmpeg" 问题解决

    我通过 命令行安装了pydub库,运行报了如下错误 RuntimeWarning: Couldn't find ffmpeg or avconv - defaulting to ffmpeg, but ...

  2. three.js 中使用多线程以及性能测试

    今天郭先生说一下WebWorker以及WebWorker在three.js中的应用.我们都知道Javascript是单线程的,比如执行js代码的同时UI渲染就会停止,对于多核CPU的点脑,这一点让人难 ...

  3. Spring Security OAuth2.0认证授权二：搭建资源服务

    在上一篇文章[Spring Security OAuth2.0认证授权一:框架搭建和认证测试](https://www.cnblogs.com/kuangdaoyizhimei/p/14250374. ...

  4. LeetCode344 反转字符串

    编写一个函数,其作用是将输入的字符串反转过来. 示例 1: 输入: "hello" 输出: "olleh" 示例 2: 输入: "A man, a p ...

  5. 【Linux】记一次xfs分区数据恢复

    项目有一块磁盘无法挂载,而且还没有做RAID.... # mount /dev/sda /xxx 报错 mount: special device /dev/sda/ does not exist   ...

  6. ctfhub技能树—sql注入—字符型注入

    打开靶机 查看页面信息 查询回显位 查询数据库名(查询所有数据库名:select group_concat(schema_name) from information_schema.schemata) ...

  7. 基于.NET Core的优秀开源项目合集

    开源项目非常适合入门,并且可以作为体系结构参考的好资源, GitHub中有几个开源的.NET Core项目,这些项目将帮助您使用不同类型的体系结构和编码模式来深入学习 .NET Core技术, 本文列 ...

  8. 1.2V升3.3V芯片，大电流，应用MCU供电，3.3V稳压源

    MCU供电一般是2.5V-5V之间等等都有,1.2V需要升到3.3V的升压芯片来稳压输出3.3V给MCU供电. 同时1.2V的输入电压低,说明供电端的能量也是属于低能量的,对于芯片自身供货是也要求高. ...

  9. Python 中 lru_cache 的使用和实现

    在计算机软件领域,缓存(Cache)指的是将部分数据存储在内存中,以便下次能够更快地访问这些数据,这也是一个典型的用空间换时间的例子.一般用于缓存的内存空间是固定的,当有更多的数据需要缓存的时候,需要 ...

  10. 中间件：ElasticSearch组件RestHighLevelClient用法详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.基础API简介 1.RestHighLevelClient RestHighLevelClient的API作为ElasticSearch备 ...