总结获取原生JS(javascript)基本操作

时间:2021-08-16 23:08:59
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)基本操作的更多相关文章

  1. 总结获取原生JS(javascript)的父节点、子节点、兄弟节点

    关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了-- 话不多说看代码 获取父节点 及 父节点下所有子节点(兄弟节点) <ul> <l ...

  2. Underscore&period;js&lpar;JavaScript对象操作方法&rpar;

    Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率.(Underscore还可以被使用在Node.js运行环境.) 在学习Underscore之前,你应该先保存它的AP ...

  3. JavaScript DOM查询,原生js实现元素子节点的获取

    在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...

  4. Ext JS学习第九天 Ext基础之 扩展原生的javascript对象

    此文来记录学习笔记: •Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务, 源码位置,我们可以从开发包的这个位 ...

  5. JavaScript:原生JS实现Facebook实时消息抓捕

    基础知识准备: HTML5给我们提供了一个新的对象叫作:MutationObserver.为了兼容,还有WebKitMutationObserver.MozMutationObserver,挂靠在wi ...

  6. JavaScript中函数和类&lpar;以及this的使用&lt&semi;重点&gt&semi;,以及js和jquery讲解,原生js实现jquery&rpar;

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  7. 原生js和jquey获取窗口宽高,滚动条,鼠标位置总结

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度   alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...

  8. 使用 原生js 制作插件 &lpar;javaScript音乐播放器&rpar;

    1.引用页面 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  9. Ajax &lpar;Asynchronous javascript xml&rpar; 搜索框核心代码&lpar;JQuery&rpar; Ajax判断用户名存在核心代码 附&colon;原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

随机推荐

  1. 12&period;组合(Composition)

    组合也是关联关系的一种特例,它体现的是一种contains-a的关系,这种关系比聚合更强,也称为强聚合:它同样体现整体与部分间的关系,但此时整体与部分是不可分的,它们具有统一的生存期,整体的生命周期结 ...

  2. 转(HP大中华区总裁孙振耀退休感言)

    开篇转发一篇好文,苦闷,消沉,寂寞,堕落的时候看看. 发现这篇文章是09年之前就有人转发到自己博客了.放到自己的地盘,容易记起有这么个心灵鸡汤.   一.关于工作与生活 我有个有趣的观察,外企公司多的 ...

  3. JavaScript 学习笔记-- ES6学习(一)介绍以及Babel的使用

    本文摘自阮一峰老师的<ECMAScript 6入门>,原文地址:http://es6.ruanyifeng.com/#docs/intro ECMAScript 6 是一个泛指,含义是5. ...

  4. 根据子级ID获取其所有父级

    当前位置>新闻中心>行业资讯 CLASSID CLASSNAME CLASSPID 1 新闻中心 0 2 行业资讯 1 3 公司新闻 1 4 媒体聚焦 0 当前位置<%=navNam ...

  5. SpringMVC 自定义拦截资料

    1.springmvc学习笔记(28)——自定义拦截器 2.Spring MVC HandlerInterceptor Annotation Example with WebMvcConfigurer ...

  6. 安卓OpenGL入门

    1.先用一个GLSurfaceView作为画布,然后自定义一个Renderer继承自Renderer,把这个自定义的Renderer通过setRenderer()设置给GLSurfaceView就可以 ...

  7. Java 之 HTML

    1.HTML a.定义:HTML指的是超文本标记语言 b.特点:HTML不是一种编程语言,而是一种标记语言 标记语言是一套标记标签 HTML使用标记标签来描述网页 c.HTML标签:①通常标签是成对出 ...

  8. Java与面向对象之随感&lpar;2&rpar;

    我们知道Java语言的一大特性就是相比于c语言和c++语言,其更加安全.那么Java安全性的一个重要保证就是它取消了指针,并且坚决反对数组的出界(c++对当数组超出上限但是还进行读写操作时允许的!), ...

  9. 解决:Adobe Acrobat Pro中设置背景颜色后,出现白色条纹

    找到  编辑->首选项->页面显示->渲染->使用2D图形加速 取消即可

  10. django rest&lowbar;framework 序列化组件详解

    为什么要用序列化组件 当我们做前后端分离的项目,我们前后端交互一般都选择JSON数据格式,JSON是一个轻量级的数据交互格式. 那么我们给前端数据的时候都要转成json格式,那就需要对我们从数据库拿到 ...