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. MyCAT详解【转】

    原文链接:MyCAT详解 作者:Rangle 一.MyCAT概述MyCAT是一款由阿里Cobar演变而来的用于支持数据库读写分离.分片的分布式中间件.MyCAT可不但支持Oracle.MSSQL.MY ...

  2. ORACLE 存储过程提高

    1.SQLCODE和SQLERRM 2.%TYPE和%ROWTYPE的使用 3.sql%rowcount的作用 1.SQLCODE和SQLERRM SQLCode:数据库操作的返回码,其中 --成功: ...

  3. Win10建立标准账户并设置标准账户权限

    Win10建立标准账户,并使用组策略对标准帐户的权限进行管理. 注意:本文内容均在管理员帐户下操作,可以只看图片按图示步骤操作即可. 一.建立一个标准账户用于公用登录 (1)按”win健+R”运行“c ...

  4. vscode 插件备忘

    由于不喜欢嵌入式c语言开发IDE,所以一致就当IDE是编译器,编辑工作都是使用其他文本编辑器替代的,最开始使用source insight,但是乱码问题和新建工程的不便利(也许不太会用),让我很纠结, ...

  5. 文件格式 rdp

    auto connect:i:1full address:s:公网访问IP地址username:s:Administrator

  6. Mha-Atlas-MySQL高可用方案实践

    一,mysql-mha环境准备 1.1 实验环境: 1.1 实验环境: 主机名 IP地址(NAT) 描述 mysql-master eth0:10.1.1.154 系统:CentOS6.5(6.x都可 ...

  7. Zabbix监控平台搭建部署与概述

    zabbix 是一个基于 WEB 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案.zabbix 能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位 ...

  8. 用js刷剑指offer(链表中倒数第k个结点)

    题目描述 输入一个链表,输出该链表中倒数第k个结点. 牛客网链接 思路 设置两个指针,p,q,先让p走k-1步,然后再一起走,直到p为最后一个 时,q即为倒数第k个节点 js代码 // 空间复杂度1 ...

  9. python3 多线程和多进程

    一.线程和进程 1.操作系统中,线程是CPU调度和分派的基本单位,线程依存于程序中 2.操作系统中,进程是系统进行资源分配和调度的一个基本单位,一个程序至少有一个进程 3.一个进程由至少一个线程组成, ...

  10. go语言合并两个数组

    https://stackoverflow.com/questions/16248241/concatenate-two-slices-in-go Add dots after the second ...