文档章节

DOM 原生操作

施长成
 施长成
发布于 2015/03/31 17:32
字数 586
阅读 61
收藏 0
点赞 0
评论 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
博文 63
码字总数 22544
作品 0
崇明
后端工程师
页面元素查找之Selectors API

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

尼阿卡 ⋅ 2016/04/11 ⋅ 0

Angular.element和$document的使用方法分析,代替jquery

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

Simon_ITer ⋅ 2016/03/01 ⋅ 0

javascript和jQuery操作dom的总结

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

Monettt ⋅ 2017/10/26 ⋅ 0

JQuery高性能最佳实践

【使用最佳选择器】 使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大。 通常比较常用的选择器有以下几个: ID选择器 $("#id") 标签...

随智阔 ⋅ 2014/03/19 ⋅ 1

微信小程序小技巧系列《一》幻灯片,tab导航切换

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

扶桑木下 ⋅ 2016/12/15 ⋅ 0

五个你必须知道的javascript和web 调试技术

Weinre 安装weinre 原理 Tips DOM断点 使用DOM断点 Tips javascript的debugger语句 使用javascript的断点 Tips 原生代码的hook调试 举个例子 Tips 远程映射本地调试 在前端开发中,调试技术是...

迷宫素描者 ⋅ 2013/12/18 ⋅ 0

Shadow DOM系列6-综述

Web Components 系列主要由自定义元素(Custom Elements)、HTML 引入(HTML Imports)和影子 DOM(shadow DOM) 组成,而 Shadow DOM 无疑是当中的重中之重。本文对下面翻译的几篇文章进行综...

一配 ⋅ 2015/08/11 ⋅ 0

jQuery的编写原则

jQuery的编写原则: 一、不要过度使用jQuery 1. jQuery速度再快,也无法与原生的javascript方法相比,而且建立的jQuery对象包含的信息量很庞大。所以有原生方法可以使用的场合,尽量避免使用...

觉皇 ⋅ 2015/12/24 ⋅ 0

现代浏览器中内置的可以等效替代jQuery的功能

jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的。当然,jQuery不是铁板一...

oschina ⋅ 2013/05/27 ⋅ 31

jquery性能优化

针对jquery性能优化这个主题,想必大家都有所了解。下面是我搜集点一点资料关于jquery性能优化,大家可以参考参考。 一、选择器性能优化建议 1. 总是从#id选择器来继承:这是jQuery选择器的一...

ACE-705 ⋅ 2014/05/13 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

金山WPS发布了Linux WPS Office

导读 近日,金山WPS发布了Linux WPS Office中文社区版新版本,支持大部分主流Linux系统,功能更加完善,兼容性、稳定性大幅度提升。本次更新WPS将首次在Linux提供专业办公文件云存储服务,实...

问题终结者 ⋅ 昨天 ⋅ 0

springboot2输出metrics到influxdb

序 本文主要研究一下如何将springboot2的metrics输出到influxdb maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

go4it ⋅ 昨天 ⋅ 0

微信小程序 - 选择图片显示操作菜单

之前我分享过选择图片这个文章,但是我在实际开发测试使用中发现一个问题在使用 wx.chooseImage 选择照片显示出第一格是拍照,后面是相册里的图片。这种实现之前说过了,效果如下。 但是你从...

hello_hp ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部