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. Framework7 - 入门教程（安装、配置、创建一个H5应用）

    1,Framework7介绍 (1)Framework7 是一个开源免费的框架.可以用来开发混合移动应用(原生和 HTML 混合)或者开发 iOS & Android 风格的 WEB APP. ...

  2. Ubuntu的apt-get代理设置

    三种方法 -o选项 # sudo apt-get -o Acquire::http::proxy="http://127.0.0.1:8080/" update 配置文件 # vi ...

  3. jq 停止/结束多个ajax请求

    页面按钮: <button id="song">abort</button> 请求: var str = {} str.xhr = $.ajax({ typ ...

  4. How to find Oracle EBS Weblogic Server Admin Port and URL

    How to find Oracle EBS Weblogic Server Admin Port and URL   Weblogic admin portMethod 1 Open the App ...

  5. gitlab中的几个常用界面（runner管理、gitlab-ci.yml管理、runner token管理、新建用户、拉用户入工程、拉用户入组、复制工程导入组）

    目录: 1.runner管理 2.gitlab-ci.yml管理 3.runner token管理 4.新建用户 5.拉用户入工程 6.拉用户入组 7.复制工程导入组 1.runners界面 http ...

  6. 当跨域时,js ajax 请求出现options请求

    上面有文章说过http的options. 查了很久.试了很多版本的jQuery,下面这段代码在同事的机子上测试是没有问题的.正常 的请求, 一在我机子上面就会出现option,网上说先向服务器预检等. ...

  7. 第二章 Django之Django安装（2）

    Django 安装 1.官方发布版安装 大多数人会考虑从 http://www.djangoproject.com/download/ 下载安装最新的官方 发布版.Django 使用了 Python ...

  8. Linux命令——vi、cut、tr、wc、sort、uniq

    vi 和 vim ^跳转当前行第一个非空字符 Ctrl + b向下翻页 Ctrl + f向上翻页 Shift + % 找到()[] {},以及在括号之间来回切换 全局替换 一次性替换文件中的所有出现的 ...

  9. 【枚举】【lrj黑书】奇怪的问题（古老的智力题）

    题目描述: 请回答下面的 10 个问题,你的回答应保证每题惟有你的选择是正确的. ⑴ 第一个答案是b 的问题是哪一个?(a )2 ( b ) 3 ( c ) 4 ( d ) 5 ( e ) 6⑵ 恰好 ...

  10. Python计算AUC

    AUC(Area under curve)是机器学习常用的二分类评测手段,直接含义是ROC曲线下的面积.另一种解释是:随机抽出一对样本(一个正样本,一个负样本),然后用训练得到的分类器来对这两个样本进 ...