节点操作：

  • 查看对象属性的值obj.getAttribute()

　　如：

  1.     //获取图片
  2.     var imgs = document.getElementsByTagName("img");
  3.     //查看src属性的值obj.getAttribute()
  4.     alert(imgs[0].getAttribute("src"));
  • 修改对象属性的值obj.setAttribute(属性，属性值)

　　如：

  1.     //获取图片
  2.     var imgs = document.getElementsByTagName("img");
  3.     //修改src属性的值obj.setAttribute(属性，属性值)
  4.     imgs[0].setAttribute("src","../img/img02.jpg");
  • 创建一个节点document.createElement();

　　如：

  1.     //创建一个节点
  2.     var newimg = document.createElement("img");
    　　//将图片的路径设置为图片3
  3.     newimg.setAttribute("src","../img/img03.jpg");
  • 为新创建的节点设置属性

　　如：

  1.     //newimg.setAttribute("width","300px"); //或下面的方法
  2.     newimg.style.width = "300px";
  3.     newimg.style.marginRight = "10px";
  • 在指定的节点插入图片
  1.     //1、在获取到的图片前面插入图片对象（新,指定的位置）
  2.     //objdiv.insertBefore(newimg,imgs[0]);
  3.  
  4.     //2、在指定节点前插入节点
  5.     //appendChild()在子节点的末尾追加节点
  6.     //objdiv.appendChild(newimg);
  7.  
  8.     //3、克隆节点cloneNode(t|f)
  9.     //如果为true时：克隆自己以及所有的子元素
  10.     //false时：不克隆子元素
  11.     var objc = objdiv.cloneNode(true);
  12.     objc.style.float = "left";
  13.     objdiv.appendChild(objc);
  • 删除节点
  1.     //删除子节点 removeChild();先访问到父节点再删除
  2.     //imgs[0].parentNode.removeChild(imgs[0]);
  3.  
  4.     //删除自己
  5.     imgs[0].remove();
  6.     //替换节点 replaceChild(new ,old);
  • 节点的属性
  1.     //nextElementSibling获取下一个兄弟节点
  2.     //previousElementSibling 获取上一个兄弟元素节点
  3.     //parentNode 获取父节点
  4.     //childNodes 获取所有的子节点、可通过数组访问
  5.     //firstChild 获取第一个子节点
  6.     //last 获取最后一个子节点

表格操作：

  1.     //获取表格对象
  2.     var table = document.getElementById("mytable");
  3.  
  4.     //获取tr
  5.     var trs = document.getElementsByTagName("tr");
  6.  
  7.     //获取表格的所有行
  8.     var row = table.rows;
  • 添加一行的操作方法
  1.         //（方法一）插入行insetRow(index)，不需要事先获取td，直接将td带入作为内容添加进去
  2.         //var row1 = table.insertRow(1).innerHTML = '<td>红楼梦</td><td>30</td>';
  3.  
  4.         //（方法二）先获得td，再给td赋值
  5.         var row1 = table.insertRow(1); //获得第一行
  6.         var td1 = row1.insertCell(0); //获得第一个td
  7.         var td2 = row1.insertCell(1);
  8.  
  9.         //将从输入框中获取到的信息赋值给td
  10.         td1.innerHTML = shu;
  11.         td2.innerHTML = danjia;
  12.  
  13.         //方法三，将克隆得到的数据插入
  14.         //先克隆第4行作为需要增加的数据
  15.         /*
  16.         var rowc = trs[3].cloneNode(true);
  17.         table.appendChild(rowc); //在table的孩子后追加克隆得到的数据
  18.         */

  • 删除行

  1.         //删除行deleteRow(index)
  2.         table.deleteRow(1);

实现图片轮播效果：

  • 代码：
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="../js/图片轮播.js" type="text/javascript" charset="utf-8"></script>
  7.         <style type="text/css">
  8.             * {
  9.                 padding: 0px;
  10.                 margin: 0px;
  11.             }
  12.  
  13.             #con {
  14.                 width: 400px;
  15.                 margin: auto;
  16.                 margin-top: 10%;
  17.                 position: relative;
  18.             }
  19.  
  20.             #img {
  21.                 width: 400px;
  22.                 height: 300px;
  23.             }
  24.  
  25.             li {
  26.                 list-style: none;
  27.                 width: 78px;
  28.                 height: 60px;
  29.                 background: rgba(0, 0, 0, 0.4);
  30.                 float: left;
  31.                 text-align: center;
  32.                 line-height: 60px;
  33.                 color: white;
  34.                 font-size: 20px;
  35.                 border: 1px gainsboro solid;
  36.                 cursor: pointer;
  37.  
  38.             }
  39.  
  40.             li:nth-child {
  41.                 background-color: rgba(0,0,0,0.4);
  42.             }
  43.  
  44.             ul {
  45.                 position: absolute;
  46.                 bottom: 4px;
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  51.         <div id="con">
  52.             <div id="pics">
  53.                 <img id="img" src="../img/img01.jpg" alt="图片路径错误">
  54.             </div>
  55.             <ul>
  56.                 <li>1</li>
  57.                 <li>2</li>
  58.                 <li>3</li>
  59.                 <li>4</li>
  60.                 <li>5</li>
  61.             </ul>
  62.         </div>
  63.     </body>
  64. </html>
  • JavaScript代码
  1. var imgs = ["img00.jpg", "img01.jpg", "img02.jpg", "img03.jpg", "img04.jpg"];
  2. var texts = ["一", "二", "三", "四", "五"];
  3.  
  4. var index = 0;
  5. var lx;
  6.  
  7. window.onload = test01;
  8.  
  9. function test01() {
  10.     lx = setInterval("changeImg()", 2000);
  11.     //获取li
  12.     var lis = document.getElementsByTagName("li");
  13.  
  14.     //循环绑定单击事件
  15.     for (var i = 0; i < lis.length; i++) {
  16.         bind(i);
  17.     }
  18. }
  19.  
  20. function bind(i) {
  21.     //index--;
  22.     var lis = document.getElementsByTagName("li");
  23.     lis[i].onclick = function() {
  24.         index = i - 1;
  25.         //清除定时器
  26.         clearInterval(lx);
  27.         changeImg();
  28.         lx = setInterval("changeImg()", 2000);
  29.     }
  30. }
  31.  
  32. function changeImg() {
  33.     index++;
  34.     if (index > imgs.length - 1) {
  35.         index = 0;
  36.     }
  37.  
  38.     //获取图片
  39.     var img = document.getElementById("img");
  40.     //修改图片的属性
  41.     var imgsrc = "../img/" + imgs[index];
  42.     img.setAttribute("src", imgsrc);
  43.  
  44.     list();
  45. }
  46.  
  47. function list() {
  48.     //获取li
  49.     var lis = document.getElementsByTagName("li");
  50.     //循环li
  51.     for (var i = 0; i < lis.length; i++) {
  52.         if (i == index) {
  53.             //换背景色
  54.             lis[index].style.backgroundColor = "rgba(60,172,200,0.4)";
  55.             //换背景文字
  56.             lis[index].innerText = texts[index];
  57.         } else {
  58.             lis[i].style.backgroundColor = "rgba(0,0,0,0.4)";
  59.             lis[i].innerText = i + 1;
  60.         }
  61.     }
  62. }

JavaScript_DOM详解的更多相关文章

  1. Linq之旅：Linq入门详解（Linq to Objects）

    示例代码下载:Linq之旅:Linq入门详解(Linq to Objects) 本博文详细介绍 .NET 3.5 中引入的重要功能:Language Integrated Query(LINQ,语言集 ...

  2. 架构设计：远程调用服务架构设计及zookeeper技术详解（下篇）

    一.下篇开头的废话 终于开写下篇了,这也是我写远程调用框架的第三篇文章,前两篇都被博客园作为[编辑推荐]的文章,很兴奋哦,嘿嘿~~~~,本人是个很臭美的人,一定得要截图为证: 今天是2014年的第一天 ...

  3. EntityFramework Core 1.1 Add、Attach、Update、Remove方法如何高效使用详解

    前言 我比较喜欢安静,大概和我喜欢研究和琢磨技术原因相关吧,刚好到了元旦节,这几天可以好好学习下EF Core,同时在项目当中用到EF Core,借此机会给予比较深入的理解,这里我们只讲解和EF 6. ...

  4. Java 字符串格式化详解

    Java 字符串格式化详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 文中如有纰漏,欢迎大家留言指出. 在 Java 的 String 类中,可以使用 format() 方法 ...

  5. Android Notification 详解（一）——基本操作

    Android Notification 详解(一)--基本操作 版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Notification 文中如有纰 ...

  6. Android Notification 详解——基本操作

    Android Notification 详解 版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天项目中有用到 Android 通知相关的内容,索性把 Android Notificatio ...

  7. Git初探--笔记整理和Git命令详解

    几个重要的概念 首先先明确几个概念: WorkPlace : 工作区 Index: 暂存区 Repository: 本地仓库/版本库 Remote: 远程仓库 当在Remote(如Github)上面c ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. Node.js npm 详解

    一.npm简介 安装npm请阅读我之前的文章Hello Node中npm安装那一部分,不过只介绍了linux平台,如果是其它平台,有前辈写了更加详细的介绍. npm的全称:Node Package M ...

随机推荐

  1. windows10图形化连接CentOS7

    前提:CentOS已经安装图形化,安装教程可以百度 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release (Core) 安装 ...

  2. String类可以被继承吗？我们来聊聊final关键字！

    String类可以被继承吗?我们来聊聊final关键字! String在java基础知识中绝对是个重点知识,关于String的一些问题也是非常的多,而且牵涉到内存等高级知识,在面试中也是经常被考察的一 ...

  3. 试试监听输入框的值 （eq:在未输入前，按钮为灰色，输入内容后，按钮变蓝色）

    参考网址:https://blog.csdn.net/tel13259437538/article/details/78927071

  4. XMPP即时通讯协议使用（十一）——Openfire表结构汇总

    行号 字段名称 字段描述 字段类型 长度 主键 说明 允许为空 用户组数据表(ofGroup) 1 groupName 组名 varchar2 50 ★   NOT NULL 2 descriptio ...

  5. python 多进程队列数据处理

    # -*- coding:utf8 -*- import paho.mqtt.client as mqtt from multiprocessing import Process, Queue imp ...

  6. 5分钟搞定android混淆（转）

    转自:https://www.jianshu.com/p/f3455ecaa56e 前言 混淆是上线前挺重要的一个环节.android使用的ProGuard,可以起到压缩,混淆,预检,优化的作用.但是 ...

  7. 异常：Error response from daemon: conflict: unable to delete 6fa48e047721 (cannot be forced) - image has dependent child images

    在删除镜像之前要先用 docker rm 删掉依赖于这个镜像的所有容器(哪怕是已经停止的容器),否则无法删除该镜像. 停止容器 # docker stop $(docker ps -a | grep ...

  8. spring 获取url参数

    1. usl格式: http://localhost:8080/contact/delete/3 java代码 @RequestMapping(value="/delete/{id}&quo ...

  9. sql中的(case when then else end )的用法（相当于java中的if else）

    Case具有两种格式:简单Case函数和Case搜索函数. 1.简单Case函数: CASE sex WHEN‘1’THEN‘男’ WHEN‘0’THEN‘女’ ELSE‘其他’END 2.Case搜 ...

  10. 【和孩子一起学编程】 python笔记--第四天

    第十一章: 可变循环 newStars = int(input("how many stars do you want?")) for i in range(newStars): ...