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实例代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>核心DOM操作</title>

 </head>

 <body>

 <script>

 //创建DOM节点

 var div1 = document.createElement("div");

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

 //添加DOM节点

 div1.appendChild(txt1);

 document.body.appendChild(div1);

 //创建水平线节点

 var hr1 = document.createElement("hr");

 //水平线节点添加到body上

 document.body.appendChild(hr1);

 var marquee1 = document.createElement("marquee");

 var img1 = document.createElement("img");

 //设置节点属性

 img1.setAttribute('src','ym.jpg');

 img1.setAttribute('width','200px');

 img1.setAttribute('height','200px');

 //图片节点添加到marquee节点上

 marquee1.appendChild(img1);

 document.body.appendChild(marquee1);

 </script>

 </body>

 </html>

三、测试代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body id="body">

     <div id="div1">

         321321

     </div>

     <button onclick="add_h3()">add_h3</button>

     <hr>

     <a id="a_1" name='tag_name' href="www.baidu.com">链接1</a>

     <a name='tag_name' href="">链接2</a>

     <a name='tag_name' href="">链接3</a>

     <a name='tag_name' href="">链接4</a>

     <!--<button onclick="getAElements()">点我</button>-->

     <button onclick="testGetAttribute()">点我</button>

     <hr>

     <ul id="ul_1">1

         <li>javascript</li>3

         <li>jquery</li>5

         <li>html</li>7

     </ul>

     <button onclick="remove_child_test()">我就是看你不爽，我就要删了你</button>

     <hr>

     <button onclick="test_parentNode()">获取body</button>

     111

     <div id="marquee_test">

     </div>

     332

     <button onclick="test_sibling()">测试上下兄弟</button>

     <button onclick="add_marquee()">添加跑马灯标签</button>

     <!--<marquee>-->

         <!--<img src="./ym.jpg">-->

     <!--</marquee>-->

     <hr>

     <script>

         var ul_1_aa=document.getElementById('ul_1');

         var ul_1=document.getElementById('ul_1').childNodes;

         console.log(ul_1.length);

         // console.log(ul_1[0]);

         // console.log(ul_1_aa.firstChild);

         console.log(ul_1[6]);

         console.log(ul_1_aa.lastChild);

         // console.log(ul_1[1]);

         // console.log(ul_1[2]);

         // console.log(ul_1[3]);

         // console.log(ul_1[4]);

         // console.log(ul_1[5]);

         // console.log(ul_1[6]);

         // console.log(ul_1[0].nodeType);

     </script>

 <ul>1<li>2</li>3</ul>

 </body>

 <script>

     //你知道dom操作是用js操作dom树的原理，并且知道几个核心函数，要用的时候不熟悉的函数直接去查文档

     //查文档的话可以直接百度 ‘dom 操作’或‘dom 操作教程’ 关键词

     /*常用函数*/

     //1、document.getElementById('div1');

     //标签之间，如果有文本，就是文本节点，如果没有，就是空白节点

     //<ul>1<li>2</li>3</ul> 1,2,3的位置都是这样，1、3是儿子，2是孙子

     // var div1=document.getElementById('div1');

     //console.log(div1);

     // console.log(div1.nodeValue);

     //var innerHTML=div1.innerHTML;

     var body_1=document.getElementsByTagName('body');

     var body1=body_1[0];

     //div1.removeChild(Node);

     // console.log(div1);

     //console.log(innerHTML);

     //console.log(body_1);

     function testGetAttribute(){

         var a_1=document.getElementById('a_1');

         var a_1_href=a_1.getAttribute('href');

         console.log(a_1_href);

         console.log(a_1_href.nodeValue +'   :a_1_href.nodeValue');

         a_1.setAttribute('a_id','7865');

     }

     function getAElements(){

         var aa=document.getElementsByName('tag_name');

         console.log(aa.length);

         console.log(aa);

     }

     //1.现在的目标，给div增加一个h3，h3里面的文本内容是‘还我命来’，h3还有一个属性是‘huai_ren’，值是‘fry’

     function add_h3() {

         var div1=document.getElementById('div1');

         var h3_1=document.createElement("h3");

         var str1=document.createTextNode('还我命来');

         h3_1.append(str1);

         h3_1.setAttribute('huai_ren','fry');

         div1.append(h3_1);

     }

     function add_marquee() {

         // var div1=document.getElementById('marquee_test');

         var body1=document.getElementById('body');

         var marquee_1=document.createElement("marquee");

         var img_1=document.createElement("img");

         img_1.setAttribute('src','./ym.jpg');

         marquee_1.append(img_1);

         // div1.append(marquee_1);

         body1.append(marquee_1);

     }

     //目标：我们想在body里面删了ul标签

     function remove_child_test() {

         var body1=document.getElementById('body');

         var ul_1=document.getElementById('ul_1');

         body1.removeChild(ul_1);

     }

     //目标：获取 id为marquee_test标签的父节点

     function test_parentNode(){

         var marquee_test=document.getElementById('marquee_test');

         console.log(marquee_test.parentNode);

     }

     //目标：获取 id为marquee_test标签 的  上一个兄弟和下一个兄弟

     function test_sibling (){

         var marquee_test=document.getElementById('marquee_test');

         console.log(marquee_test.nextSibling);

     }

 </script>

 </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. stm32 定时器 通用定时器

    STM32F10xxx 2个基本定时器(TIM6.TIM7) 4个通用定时器(TIM2. TIM3. TIM4和TIM5) 2个高级定时器(TIM1.TIM8) 每个定时器都是完全独立的,没有互相共享 ...

  2. Ubuntu安装telnet

    安装 # sudo apt-get install xinetd telnetd 配置 -> 加入以下选项 # sudo vi /etc/inetd.conf telnet stream tcp ...

  3. 如何使用Visual Studio Code调试PHP CLI应用和Web应用

    在按照Jerry的公众号文章 什么?在SAP中国研究院里还需要会PHP开发? 进行XDebug在本地的配置之后,如果想使用Visual Studio Code而不是Eclipse来调试PHP应用,步骤 ...

  4. 新版mysql的配置文件my.ini位置

    在网上的博客上找了好久的my.ini,一直找不到.最后发现原来新版本的mysql已经不把my.ini放在原始的安装目录了.而是放在了C:/ProgramData下.

  5. nc 命令

    目录 nc 命令 一.简介 二.案例 1.端口扫描 2.聊天 3.文件传输 4.目录传输 5.加密网络发送的数据 6.流视频 7.克隆一个设备 8.打开一个shell 9.反向shell 10.指定端 ...

  6. Image Processing and Analysis_15_Image Registration：Image matching as a diffusion process: An analogy with Maxwell's demons——1998

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  7. Mybatis在xml文件中处理大于、小于、不等于号的方法

    在mapper.xml使用大于.小于等符号会和xml语法冲突,解决冲突有两种方式. 方法一: 使用转义字符: 字符名称 字符符号 转义字符 大于号 > > 小于号 < < 与 ...

  8. RT-Thread--线程管理

    线程管理的功能特点 RT-Thread系统中线程是调度的最小单位: 线程分为:系统线程和用户线程,系统线程是由 RT-Thread 内核创建的线程,用户线程是由应用程序创建的线程,这两类线程都会从内核 ...

  9. synchronized 和 Lock 有什么区别？（未完成）

    synchronized 和 Lock 有什么区别?(未完成)

  10. php中float浮点型字段查询问题(数据对应不上)

    薪资表  查询员工提成时候  比如说表里面是88.8  查询出来则是89 反复调试 未果,最后查看表设计  把金额字段类型设置成float 最后换成double 解决问题!!!!