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. from表单中checkbox的多选，ajax转入后台，后台接受

    var check = [];//定义一个空数组 $("input[name='category']:checked").each(function(i){//把所有被选中的复选框 ...

  2. ajax获取后台数据出错parsererror

    原因是dataType如果为json,返回的数据是text就会报错.

  3. 阿里P7告诉你什么是java并发包、线程池、锁

    并发包 java.util.concurrent从jdk1.5开始新加入的一个包,致力于解决并发编程的线程安全问题,使用户能够更为快捷方便的编写多线程情况下的并发程序. 同步容器 同步容器只有包括Ve ...

  4. C和指针--预处理器

    编译一个C程序的第1个步骤是预处理(preprocessing)阶段.C预处理器在源代码编译之前对其进行一些文本性质的操作.它的主要任务包括删除注释.插入被#include指令包含的文件的内容.定义和 ...

  5. 切换composer国内镜像 Laravel China停用，切换阿里云composer全量镜像

    composer config -g repo.packagist composer https://packagist.phpcomposer.com Laravel China 镜像完成历史使命, ...

  6. 两个linux服务器之间免密登录

    服务器A(假设为10.64.104.11) 免密登录服务器B(10.64.104.22) 1.登录服务器A 2.生成公私钥 ssh-keygen -t rsa 3.将生成的.pub文件发送到服务器B上 ...

  7. MVVM框架（Vue）

    问题: 一:说一下使用 JQuery和使用框架的区别? 二: 说一下对 MVVM的理解 三: Vue中如何实现响应式 四: vue中如何解析模板 五:vue整个实现流程 1. 说一下使用 JQuery ...

  8. 设置了msconfig处理器个数和内存开不了机终极解决办法

    1.进入 启动修复 的 命令提示符(最好是使用有管理员权限的,不过普通用户我也每试过), 使用 bcdedit 命令来查看. 2.可以查看到你的启动参数. 确认 truncatememory 是否为 ...

  9. C语言学习系列（一）开门首篇

    一.特辑 此次是我自己的学习之路,和大家一起分享(我现在是做Java),途中遇到什么问题大家也可以提出来一起讨论一起进步: 主要参考教程是菜鸟教程上面的C语言教程,以及大学课本C语言教程-第四版(谭浩 ...

  10. JavaScript有趣的知识点

    JavaScript中总有一些有趣的小知识,而且又是很容易犯错的.我把我遇到的慢慢罗列一下,方便大家避坑 typeof(null)返回的结果是 object " "变成布尔类型为t ...