对于已经讲解给大家的DOM实战,我今天给大家几个实战代码,可以让大家加深对此的理解!

1.用DOM动态生成这样一个结构:

 <div class=”example”>

       <p class=”slogan”>HelloWorld</p>

 </div>

我认为中规中矩的写法是这个样子的:

   var div = document.createElement(‘div’),
p = document.createElement(‘p’),
text = document.create(‘HelloWorld’);
div.setAttribute(‘class’, ‘example’);
p.setAttribute(‘class’, ‘slogan’);
p.appendChild(text);
div.appendChild(p);
document.body.append(div);
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

• 不过这里有点小提示,节点的className属性可以读写操作class。

因此这里我们为标签赋类名的值的时候可以不用setAttribute,可以直接用className。

   div.className = ‘example’;  p.className = ‘slogan’;  
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

不过,还有一个最取巧的办法,那就是直接用innerHTML。

  div.innerHTML = <p class=“slogan”>HelloWorld</p> 
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

2.封装函数InsertAfter();功能类似insertBefore,直接在原型链上编程,可以忽略老版本的浏览器。

代码:


   Element.insertAfter = function (targetNode, afterNode) {
var nextSib = after.nextElementSibling;
if(this.children.length <= 1 || !nextSib) {
this.appendChild(targetNode);
}else {
this.insertBefore(targetNode, nextSibling);
}
}
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这里是利用了原生的insertBefore方法,我们检测当只有一个子元素或者我们要找的元素就是最后一个,那么直接调用appendChild方法就可以,否则就找到要找的元素的下一个,然后把它的下一个元素当做insert的元素调用insertBefore方法就可以了。

3.封装remove()函数,使得child.remove()可以销毁自身。

看题目的要求就是要在原型链上编程。

代码:

   Element.prototype.remove = function () {
var parent = this.parentNode;
parent.removeChild(this);
}
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

这个问题的代码其实很简单,只要找到这个元素的父级,然后让父级删除掉这个元素就可以了。

4.将目标节点内部的节点顺序逆序。

eg: <div><p></p><a></a></div>    —>

<div><a></a><p></p></div>

对于这个题目,我的做法是利用我们插入的元素如果是本身就存在的,那么就会剪切到新的位置上这个特性来做的。

代码:


  Element.prototype.reverseElement = function(){
var len = this.childNodes.length,
child,
first = this.firstChild;
for (var i = 0; i < len - 1; i++){
child = this.lastChild;
this.insertBefore(child, first);
}
}
JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”)

DOM基础操作实战代码的更多相关文章

  1. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  2. PHP原生DOM对象操作XML'代码'

    对于操作XML类型文件,PHP内置有一套DOM对象可以进行处理.对XML的操作,从创建.添加到修改.删除都可以使用DOM对象中的函数来进行. 创建 创建一个新的XML文件,并且写入一些数据到这个XML ...

  3. DOM基础操作(三)

    DOM剩余的两个操作一并带来! 1.删除操作 removeChild 这个方法依然是父级调用的,参数就是要删除的子节点,其实实际上是剪切,这个方法会把我们删除掉的元素给返回,我们可以用一个变量去保存这 ...

  4. DOM基础操作(二)

    插入操作 1.appendChild(child); 这个是父级调用的方法,它会将child元素插入到父级里面,而且是放到逻辑后面的位置上.   div.appendChild(comment);   ...

  5. DOM基础操作(一)

    DOM的基本操作有四种,我们会逐一给大家进行展示 增加操作 1.创建元素节点 createElement 我们可以通过document.createElement(‘div’);这个方法来创建一个元素 ...

  6. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

  7. javascript DOM基础操作

    DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口).DOM描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM ...

  8. jQuery~DOM基础操作

    操作DOM 1.什么是DOM:document object model文档对象模型 2.树形结构 3.什么是节点(node):DOM结构中最小单位,元素.文本.属性...创建节点 var $div ...

  9. DOM基础操作

    本文地址:http://www.cnblogs.com/veinyin/p/7606972.html  1 访问 HTML 元素 常用方法 document.getElementById(" ...

随机推荐

  1. 转一下大师兄的"MySQL高可用架构之MHA"

    简介: MHA(Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由日本DeNA公司youshimaton(现就职于Facebook公司)开发,是 ...

  2. 图的最小生成树的理解和实现:Prim和Kruskal算法

    最小生成树 一个连通图的生成树是一个极小的连通子图,它含有图中所有的顶点,但只有足以构成一棵树的n-1条边.我们将构造连通网的最小代价生成树称为最小生成树(Minimum Cost Spanning ...

  3. C#-WebForm-ajax状态保持

    cookies: ashx端赋值: context.Response.Cookies["Username"].Value = ""; 后台端加载: Respon ...

  4. CodeForces - 1025B Weakened Common Divisor

    http://codeforces.com/problemset/problem/1025/B 大意:n对数对(ai,bi),求任意一个数满足是所有数对中至少一个数的因子(大于1) 分析: 首先求所有 ...

  5. 2018沈阳网络赛 - Ka Chang KD树暴力

    题意:给你一棵树,n个点q次操作,操作1查询x子树深度为d的节点权值和,操作2查询子树x权值和 把每个点按(dfn,depth)的二维关系构造kd树,剩下的只需维护lazy标记即可 #include& ...

  6. Mac下Homebrew的图形化界面工具Cakebrew

    安装: brew cask install cakebrew 如果不能下载直接上官网下载dmg包进行安装. 参考: https://www.cakebrew.com/ https://github.c ...

  7. (转)linux运维必会MySQL企业面试题

    linux运维必会MySQL企业面试题  老男孩教育运维班全体学员MySQL必会企业面试题最实战.最细致.最落地的运维实训基地,老男孩教育连续多年国内平均就业工资最高! 数据库的重要性是所有技术里最核 ...

  8. 【转载】伪静态SQL注入

    伪静态,主要是为了隐藏传递的参数名,伪静态只是一种URL重写的手段,既然能接受参数输入,所以并不能防止注入.目前来看,防止注入的最有效的方法就是使用LINQ.常规的伪静态页面如下:http://www ...

  9. WPF中Window的ShowInTaskbar、Owner和Topmost属性

    1. ShowInTaskbar:设置窗口是否在任务栏上有一席之位,默认为true, 当在父窗口上新开一个子窗口时,任务栏上就会出现两个窗口,所以当要实现 不管开启多少个窗口,在任务栏上都只显示一个窗 ...

  10. 微电子中的die-to-die和within-die

    工艺制造中lot指按某种方式生成的硅柱状体,将这些lot切成薄片就称为wafer,wafer是进行集成电路制造的基板,一般以直径来区分,8寸.10寸,12寸等,或者以毫米来区分.直径越大材料的利用率越 ...