文档章节

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
博文 66
码字总数 24419
作品 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
浅谈React的最大亮点——虚拟DOM

在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制。 一、什么是...

peakedness丶
11/15
0
0
javascript和jQuery操作dom的总结

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

Monettt
2017/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
6分钟前
2
1
EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
15
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
19
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
22
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部