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. class类 - static

    不需要实例化类,即可直接通过该类来调用的方法,即称之为"静态方法".将类中的方法设为静态方法也很简单,在方法前加上static关键字即可.这样该方法就不会被实例继承! class ...

  2. python3爬虫之requests库基本使用

    官方文档链接(中文) https://2.python-requests.org/zh_CN/latest/ requests  基于  urllib3 ,python编写. 安装 pip insta ...

  3. Linux行编辑器——ed

    实验文件test.txt内容 root:x:::root:/root:/bin/bash bin:x:::bin:/bin:/sbin/nologin daemon:x:::daemon:/sbin: ...

  4. Install RabbitMQ on CentOS 7

    NOTE: this article is only for CentOS 7 How to Install RabbitMQ on CentOS 7 yum update Install erlan ...

  5. PAT Basic 1055 集体照 (25 分)

    拍集体照时队形很重要,这里对给定的 N 个人 K 排的队形设计排队规则如下: 每排人数为 /(向下取整),多出来的人全部站在最后一排: 后排所有人的个子都不比前排任何人矮: 每排中最高者站中间(中间位 ...

  6. 各位大佬Python的第一部分道基础题已经整理好了，希望大家面试的时候能用的上。

    Python的第一部分道基础题,希望大家面试的时候能用的上. 1.为什么学习Python? Python是目前市面上,我个人认为是最简洁.最优雅.最有前途.最全能的编程语言,没有之一. 2.通过什么途 ...

  7. Selenium（十一）使用EXCEL读取用户数据和生成测试报表

    1.下载两个模块 2.xlrd的使用方法 3.使用excel获取数据 在userdata文件中增加代码: login.py: 4.使用excel生成测试报表 举例: 在log_module中定义函数: ...

  8. 4.使用webpack-dev-server工具实现自动打包编译的功能

    使用webpack-dev-server这个工具,来实现自动打包编译的功能 1.运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖 或者运行 cnpm i ...

  9. 【安卓基础】WebView开发优化基础

    最近工作很忙,不仅要抽空进行管理,还有开发任务在身,幸好有一些规划进行指导,所以还能顺利解决问题.在管理和技术上面,我认为技术是硬实力,管理是软实力,自己需要多点时间花在技术上. 回归正题,在项目中的 ...

  10. BZOJ3791 作业 动态规划

    你发现染 $k$ 次最多会将这个序列分成 $2k-1$ 段,然后任何 $2k-1$ 段以内的方案一定能被构建出来,所以直接 dp 就好了 #include <bits/stdc++.h> ...