总结获取原生JS(javascript)基本操作
var a = document.getElementByIdx_x_x("dom");
jsCopy(a);//调用清理空格的函数
var b = a.childNodes;//获取a的全部子节点;
var c = a.parentNode;//获取a的父节点;
var d = a.nextSibling;//获取a的下一个兄弟节点
var e = a.previousSibling;//获取a的上一个兄弟节点
var f = a.firstChild;//获取a的第一个子节点
var g = a.lastChild;//获取a的最后一个子节点
Element,元素
Attribute,属性
Text,文本
DOM节点创建最常用的便是document.createElement和document.createTextNode方法:
var el1 = document.createElement('div');
var el2 = document.createElement('input');
var node = document.createTextNode('hello world!');
DOM 查询
元素查询的API返回的的结果是DOM节点或者DOM节点的列表。document提供了两种Query方法:
// 返回当前文档中第一个类名为 "myclass" 的元素
var el = document.querySelector(".myclass");
// 返回一个文档中所有的class为"note"或者 "alert"的div元素
var els = document.querySelectorAll("div.note, div.alert");
// 获取元素
var el = document.getElementById('xxx');
var els = document.getElementsByClassName('highlight');
var els = document.getElementsByTagName('td');
Element也提供了很多相对于元素的DOM导航方法:
// 获取父元素、父节点
var parent = ele.parentElement;
var parent = ele.parentNode;
// 获取子节点,子节点可以是任何一种节点,可以通过nodeType来判断
var nodes = ele.children;
// 查询子元素
var els = ele.getElementsByTagName('td');
var els = ele.getElementsByClassName('highlight');
// 当前元素的第一个/最后一个子元素节点
var el = ele.firstElementChild;
var el = ele.lastElementChild;
// 下一个/上一个兄弟元素节点
var el = ele.nextElementSibling;
var el = ele.previousElementSibling;
DOM 更改
// 添加、删除子元素
ele.appendChild(el);
ele.removeChild(el);
// 替换子元素
ele.replaceChild(el1, el2);
// 插入子元素
parentElement.insertBefore(newElement, referenceElement);
属性操作
// 获取一个{name, value}的数组
var attrs = el.attributes;
// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');
// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');
// 是否有属性设置
el.hasAttributes();
总结获取原生JS(javascript)基本操作的更多相关文章
- 总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...
- Underscore.js(JavaScript对象操作方法)
Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率.(Underscore还可以被使用在Node.js运行环境.) 在学习Underscore之前,你应该先保存它的AP ...
- JavaScript DOM查询,原生js实现元素子节点的获取
在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...
- Ext JS学习第九天 Ext基础之 扩展原生的javascript对象
此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...
- JavaScript:原生JS实现Facebook实时消息抓捕
基础知识准备: HTML5给我们提供了一个新的对象叫作:MutationObserver.为了兼容,还有WebKitMutationObserver.MozMutationObserver,挂靠在wi ...
- JavaScript中函数和类(以及this的使用<重点>,以及js和jquery讲解,原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结
JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...
- 使用 原生js 制作插件 (javaScript音乐播放器)
1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
随机推荐
- ffmpeg教程
转:http://blog.sina.com.cn/s/blog_51396f890100nd91.html 概要 电影文件有很多基本的组成部分.首先,文件本身被称为容器Container,容器的类 ...
- Non-Nullable Types vs C#: Fixing the Billion Dollar Mistake (转载)
One of the top suggestions (currently #15 on uservoice) for improving C# is the addition of non-null ...
- 一文读懂类加载机制--ClassLoader
一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管是CS还是BS应用,都是由若干个.class文件组织而成的一个完整的Java应用程序,当程序在运行时,即会调用该程 ...
- GPUImage源码解读之GPUImageFramebufferCache
简介 由于GPUImage添加滤镜可以形成一个FilterChain,因此,在渲染的过程中,可能会需要很多个FrameBuffer,但是正如上文所说,每生成一个FrameBuffer都需要占用一定的内 ...
- .net core 基于Claim登录验证
网站,首先需要安全,实现安全就必须使用登录验证,.net core 基于Claim登录验证就很简单使用. Claim是什么,可以理解为你的身份证的中的名字,性别等等的每一条信息,然后Claim组成一个 ...
- Linux sed命令用法
概述 sed命令是一个面向字符流的非交互式编辑器,不允许用户与它进行交互操作.sed是以行为单位处理文本内容的.在shell中,可以批量修改文本内容. 用法 sed [选项] [动作] 选项与参数:- ...
- centos7安装ftp
1.服务器初始化检查 检查selinux,firewall,iptables是否开启 1.查看selinux的运行状态 [root@zeq ~] getenforce Disabled 我的现在是关闭 ...
- jQuery.qrcode 生成二维码,并使用 jszip、FileSaver 下载 zip 压缩包至本地。
生成二维码 引用 jquery.qrcode.js :连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js .https:// ...
- 使用jQuery实现向上循环滚动效果(超简单)
今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...
- Tornado用户指引(一)-----------异步和非阻塞I/O
摘要:异步和非阻塞I/O实时WEB的特性是经常需要为每个用户端维持一个长时间存活但是大部分时候空闲的连接.在传统的同步式web服务器中,这主要通过为每个用户创建一个线程来实现,这样的代价是十分昂贵的. ...