文档章节

DOM 原生操作

施长成
 施长成
发布于 2015/03/31 17:32
字数 586
阅读 63
收藏 0

1.

var a = document.getElementById();
var b = document.getElementByName();...

从上面的代码中得到的值[a,b] 它们的数据类型为 元素数组 例如[p, item: function, namedItem: function];

但是在原生DOM的操作中我们需要使用的Node类型的数据,因此需要将 元素数组 转出 Node元素。

Node node = a[0];或者 Node node = b[0];简单的说,如果通过 var elements = document.getElementBy.. 这样的方法可以能到满足条件的所有元素,以及一些function方法,而 通过 elements[0] 或者 elements[1] ([]中的值根据满足条件的节点数目而定) 可能获取到这个元素的 Node 值。

 2.insertBefore 和 insertAfter 的使用。

    在html5 中 insertBefore(paramA,paramB) 和  insertAfter(paramA,paramB) 中必须使用两个参数,如果使用一个错误会报错。insertBefore 和 insertAfter 方法只有Node类型的元素 才具有该方法,insertBefore和insertAfter中的第二个参数为调用该方法的Node的子节点,如果该Node存在子节点则可以使用 Node.childNodes[0]来替换,如果没有子节点则通过其他方式来添加节点。在该处可能会出现的js错误:

    1. The node before which the new node is to be inserted is not a child of this【code】

    2. Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 present.

    3. Uncaught TypeError: undefined is not a function

    4. Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

3.API介绍

    因为我主要是想提醒大家在使用原生DOM时可能会出现的问题,对于API的介绍我推荐:http://weirhp.iteye.com/blog/963835


结尾代码:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div>
        <p><label>aaa</label></p>
        <label>dddd</label>
    </div>
    <div>
        <p>aaa</p>
        <label>dddd</label>
    </div>
</body>

<script type="text/javascript">
    var div = document.getElementsByTagName("div");
    console.log(div);
    var div1 = div[0];
    console.log(div1);
    var p = div1.getElementsByTagName("p");
    div1.setAttribute("shi","shi");
//    div1.className = "shi";
    console.log(p);
    p.className = "aaa";
    var label = document.createElement("label");
    label.innerText = "label";
//    console.log(typeof (document.body));
    console.log(p[0]);
    var a = document.createElement("a");
    a.innerText = "shi";
//    document.body.insertBefore(a,p[0]);
//    p[0].insertBefore(a,p[0].childNodes[0]);//正确的
//    p.insertBefore(a,p[0].childNodes[0]);//演示错误  Uncaught TypeError: undefined is not a function
//    p[0].insertBefore(a);//演示错误  Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 present.
    p[0].insertBefore(a,p[0]);//演示错误  Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
//    document.body.removeChild(div1);
</script>

</html>



© 著作权归作者所有

共有 人打赏支持
施长成
粉丝 5
博文 65
码字总数 23983
作品 0
浦东
后端工程师
jQuery? 回归JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者,So Perfect!!)如今也有的大势。但JS原生API写法依旧;并且有时候只不过小写一个Demo,或者产品中只有少量...

jeffjade
2015/12/13
0
0
页面元素查找之Selectors API

DOM操作 在HTML5之前,页面元素查找使用的是原生javascript的方法,主要有以下三个基本的操作方法 1.getElementById(): 查找指定id值的元素 2.getElementsByName():查找指定name值得所有元...

尼阿卡
2016/04/11
10
0
Angular.element和$document的使用方法分析,代替jquery

AngularJs是不直接操作DOM的,但是在平时的开发当中,我们有的时候还是需要操作一些DOM的,如果使用原生的JS的话操作过于麻烦,所以大家一般都是使用jQuery,jQuery虽然好用,但是AngularJs...

Simon_ITer
2016/03/01
7K
0
javascript和jQuery操作dom的总结

其实dom的操作无非四点:增删查改 还有就是属性操作和class操作 先总结原生js的操作 增: createElement方法用来生成HTML元素节点。 createElement方法的参数为元素的标签名,即元素节点的t...

Monettt
2017/10/26
0
0
微信小程序小技巧系列《一》幻灯片,tab导航切换

作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现。

扶桑木下
2016/12/15
293
0

没有更多内容

加载失败,请刷新页面

加载更多

分布式框架spring-session实现session一致性使用问题

前言:项目中使用到spring-session来缓存用户信息,保证服务之间session一致性,但是获取session信息为什么不能再服务层获取? 一、spring-session实现session一致性方式 用户每一次请求都会...

WALK_MAN
35分钟前
3
0
C++ yield()与sleep_for()

C++11 标准库提供了yield()和sleep_for()两个方法。 (1)std::this_thread::yield(): 线程调用该方法时,主动让出CPU,并且不参与CPU的本次调度,从而让其他线程有机会运行。在后续的调度周...

yepanl
43分钟前
1
0
Java并发编程实战(chapter_3)(线程池ThreadPoolExecutor源码分析)

这个系列一直没再写,很多原因,中间经历了换工作,熟悉项目,熟悉新团队等等一系列的事情。并发课题对于Java来说是一个又重要又难的一大块,除非气定神闲、精力满满,否则我本身是不敢随便写...

心中的理想乡
53分钟前
19
0
shell学习之获取用户的输入命令read

在运行脚本的时候,命令行参数是可以传入参数,还有就是在脚本运行过程中需要用户输入参数,比如你想要在脚本运行时问个问题,并等待运行脚本的人来回答。bash shell为此提 供了read命令。 ...

woshixin
今天
1
0
区块链技术中的那些能商用的企业级应用

WEPOWER是一家立陶宛初创企业,旨在改变可再生电力项目的付费方式。WePower公司创始人Nick Martyniuk表示,政府统一收购价的存在推动了全球风能与太阳能市场的发展。因此,他的公司希望帮助那...

问题终结者
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部