js的dom测试及实例代码

一、总结

一句话总结：

1、需要记得 创建 标签和创建文本节点都是document的活：document.createTextNode("Rockets的姚明");
2、appendChild就是 标签 都可以干的活：document.body.appendChild(hr1);

1、需要记得 创建 标签和创建文本节点都是document的活？

var div1 = document.createElement("div");
var txt1 = document.createTextNode("Rockets的姚明");

2、appendChild就是 标签 都可以干的活？

document.body.appendChild(hr1);//水平线节点添加到body上

二、dom实例代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>核心DOM操作</title>
  6.  </head>
  7.  <body>
  8.  <script>
  9.  //创建DOM节点
  10.  var div1 = document.createElement("div");
  11.  var txt1 = document.createTextNode("Rockets的姚明");
  12.  //添加DOM节点
  13.  div1.appendChild(txt1);
  14.  document.body.appendChild(div1);
  15.  
  16.  //创建水平线节点
  17.  var hr1 = document.createElement("hr");
  18.  //水平线节点添加到body上
  19.  document.body.appendChild(hr1);
  20.  
  21.  var marquee1 = document.createElement("marquee");
  22.  var img1 = document.createElement("img");
  23.  //设置节点属性
  24.  img1.setAttribute('src','ym.jpg');
  25.  img1.setAttribute('width','200px');
  26.  img1.setAttribute('height','200px');
  27.  //图片节点添加到marquee节点上
  28.  marquee1.appendChild(img1);
  29.  document.body.appendChild(marquee1);
  30.  </script>
  31.  </body>
  32.  </html>

三、测试代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Document</title>
  6.  </head>
  7.  <body id="body">
  8.      <div id="div1">
  9.          321321
  10.      </div>
  11.      <button onclick="add_h3()">add_h3</button>
  12.      <hr>
  13.      <a id="a_1" name='tag_name' href="www.baidu.com">链接1</a>
  14.      <a name='tag_name' href="">链接2</a>
  15.      <a name='tag_name' href="">链接3</a>
  16.      <a name='tag_name' href="">链接4</a>
  17.      <!--<button onclick="getAElements()">点我</button>-->
  18.      <button onclick="testGetAttribute()">点我</button>
  19.      <hr>
  20.  
  21.      <ul id="ul_1">1
  22.          <li>javascript</li>3
  23.          <li>jquery</li>5
  24.          <li>html</li>7
  25.      </ul>
  26.      <button onclick="remove_child_test()">我就是看你不爽，我就要删了你</button>
  27.      <hr>
  28.      <button onclick="test_parentNode()">获取body</button>
  29.      111
  30.      <div id="marquee_test">
  31.  
  32.      </div>
  33.      332
  34.      <button onclick="test_sibling()">测试上下兄弟</button>
  35.      <button onclick="add_marquee()">添加跑马灯标签</button>
  36.      <!--<marquee>-->
  37.          <!--<img src="./ym.jpg">-->
  38.      <!--</marquee>-->
  39.      <hr>
  40.  
  41.      <script>
  42.          var ul_1_aa=document.getElementById('ul_1');
  43.          var ul_1=document.getElementById('ul_1').childNodes;
  44.          console.log(ul_1.length);
  45.          // console.log(ul_1[0]);
  46.          // console.log(ul_1_aa.firstChild);
  47.  
  48.          console.log(ul_1[6]);
  49.          console.log(ul_1_aa.lastChild);
  50.          // console.log(ul_1[1]);
  51.          // console.log(ul_1[2]);
  52.          // console.log(ul_1[3]);
  53.          // console.log(ul_1[4]);
  54.          // console.log(ul_1[5]);
  55.          // console.log(ul_1[6]);
  56.          // console.log(ul_1[0].nodeType);
  57.      </script>
  58.  <ul>1<li>2</li>3</ul>
  59.  </body>
  60.  <script>
  61.      //你知道dom操作是用js操作dom树的原理，并且知道几个核心函数，要用的时候不熟悉的函数直接去查文档
  62.      //查文档的话可以直接百度 ‘dom 操作’或‘dom 操作教程’ 关键词
  63.      /*常用函数*/
  64.      //1、document.getElementById('div1');
  65.  
  66.      //标签之间，如果有文本，就是文本节点，如果没有，就是空白节点
  67.      //<ul>1<li>2</li>3</ul> 1,2,3的位置都是这样，1、3是儿子，2是孙子
  68.  
  69.      // var div1=document.getElementById('div1');
  70.      //console.log(div1);
  71.      // console.log(div1.nodeValue);
  72.  
  73.      //var innerHTML=div1.innerHTML;
  74.      var body_1=document.getElementsByTagName('body');
  75.      var body1=body_1[0];
  76.      //div1.removeChild(Node);
  77.      // console.log(div1);
  78.      //console.log(innerHTML);
  79.      //console.log(body_1);
  80.  
  81.      function testGetAttribute(){
  82.          var a_1=document.getElementById('a_1');
  83.          var a_1_href=a_1.getAttribute('href');
  84.          console.log(a_1_href);
  85.          console.log(a_1_href.nodeValue +'   :a_1_href.nodeValue');
  86.          a_1.setAttribute('a_id','7865');
  87.      }
  88.  
  89.      function getAElements(){
  90.          var aa=document.getElementsByName('tag_name');
  91.          console.log(aa.length);
  92.          console.log(aa);
  93.      }
  94.  
  95.      //1.现在的目标，给div增加一个h3，h3里面的文本内容是‘还我命来’，h3还有一个属性是‘huai_ren’，值是‘fry’
  96.      function add_h3() {
  97.          var div1=document.getElementById('div1');
  98.          var h3_1=document.createElement("h3");
  99.          var str1=document.createTextNode('还我命来');
  100.          h3_1.append(str1);
  101.          h3_1.setAttribute('huai_ren','fry');
  102.          div1.append(h3_1);
  103.      }
  104.  
  105.      function add_marquee() {
  106.          // var div1=document.getElementById('marquee_test');
  107.          var body1=document.getElementById('body');
  108.          var marquee_1=document.createElement("marquee");
  109.          var img_1=document.createElement("img");
  110.          img_1.setAttribute('src','./ym.jpg');
  111.          marquee_1.append(img_1);
  112.          // div1.append(marquee_1);
  113.          body1.append(marquee_1);
  114.      }
  115.  
  116.      //目标：我们想在body里面删了ul标签
  117.      function remove_child_test() {
  118.          var body1=document.getElementById('body');
  119.          var ul_1=document.getElementById('ul_1');
  120.          body1.removeChild(ul_1);
  121.      }
  122.  
  123.      //目标：获取 id为marquee_test标签的父节点
  124.      function test_parentNode(){
  125.          var marquee_test=document.getElementById('marquee_test');
  126.          console.log(marquee_test.parentNode);
  127.      }
  128.  
  129.      //目标：获取 id为marquee_test标签 的  上一个兄弟和下一个兄弟
  130.      function test_sibling (){
  131.          var marquee_test=document.getElementById('marquee_test');
  132.          console.log(marquee_test.nextSibling);
  133.      }
  134.  
  135.  </script>
  136.  </html>

转自：https://www.cnblogs.com/shihaiying/p/11780255.html

 

js的dom测试及实例代码的更多相关文章

  1. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  2. JS判断不能为空实例代码

    JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  3. python 解析XML python模块xml.dom解析xml实例代码

    分享下python中使用模块xml.dom解析xml文件的实例代码,学习下python解析xml文件的方法. 原文转自:http://www.jbxue.com/article/16587.html ...

  4. js左侧三级菜单导航实例代码

    在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码:   <!DOCTYPE html PUBLIC "-//W3C// ...

  5. js设计模式之实现观察者模式实例代码

    前端界面 html代码 <body> <select name="" id="select"> <option value=&qu ...

  6. junit高级篇（参数化、打包测试）-实例代码

    工程目录: 参数化测试,SquareTest.java: import static org.junit.Assert.*; import java.util.Arrays; import java. ...

  7. 关于JS的DOM操作——重要实例的操作

    1.复选框与按钮的配合使用的DOM操作 <body>                <input type="checkbox" id="ckb1&qu ...

  8. js鼠标、键盘事件实例代码

    1. 鼠标的哪个按键被点击? <html> <head> <script type="text/javascript"> function wh ...

  9. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

随机推荐

  1. Docker安装nginx,把nginx.conf放入指定位置

    拉取镜像 docker pull nginx 创建目录 创建一个目录用来存放文件,方便我们进行修改 mkdir -p /everything/nginx/conf /everything/nginx/ ...

  2. 案例：selenium实现登录处理弹窗

    func.py https://www.cnblogs.com/andy9468/p/10899508.html main.py中 # 导入webdriver import os import tim ...

  3. Mysql的管理

    Linux系统中:mysql进入的命令为mysql -u root -p +你的mysql密码. Mysql是如何添加用户呢? 在mysql命令行下,使用use mysql;进入mysql的数据库中. ...

  4. springmvc模式下的上传和下载

    接触了springmvc模式后,对上一次的上传与下载进行优化, 上次请看这里. 此处上传的功能依旧是采用表格上传.文件格式依旧是 <form action="${pageContext ...

  5. springboot系列（三） 启动类中关键注解作用解析

    一.Springboot:请求入口 @SpringBootApplication @EnableAspectJAutoProxy @EnableScheduling @EnableTransactio ...

  6. Qt一些方便易用的小技巧

    延迟给自己发信号执行操作 //延迟4500毫秒, 改变Status的值. QTimer::singleShot(4500, this, [&](){ this->Status = 0; ...

  7. python-----图片保存为视频

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/7/2 13:32 # @Author : xiaodai # -*- cod ...

  8. 【python】获取目录下的最新文件夹/文件

    直接上代码 def new_report(test_report): lists = os.listdir(test_report) #列出目录的下所有文件和文件夹保存到lists print(lis ...

  9. Python命令行创建虚拟环境

    Python命令行创建虚拟环境 安装virtualenv 启动命令行,执行命令pip install -U virtualenv 创建一个新的虚拟环境 执行命令python -m virtualenv ...

  10. POP3与SMTP以及python实现邮件的发送

    什么是POP3协议: POP3是Post Office Protocol 3的简称,即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议.它是因特网 ...