1.通过ID选取元素

var section = document.getElementById("section1");

2.通过ID查找多个元素

function getElements(/*ids...*/){
var elements = {};
for(var i =0; i < arguments.length; i++){
var id = arguments[i];
var elt = document.getElementById(id);
if(elt ==null) throw new Error("no element");
elements[id] = elt;
}
return elements;
}

3.通过名字查找元素

var spans = document.getElementsByTagName("span");

4.通过CSS类选取元素

var fatal = document.getElementByClassName("fatal error");

5.节点树

parentNode:该节点的父节点,或者针对类似Document对象应该是null,因为它没有父节点

childNodes:只读的类数组对象,它是该节点的子节点的实时表示

firstChild、lastChild:该节点的子节点中的第一个和最后一个,如果该节点没有子节点则为null

nextSibling、previoursSibling:该节点的兄弟节点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点。节点的顺序反应了它们在文档中出现的顺序。这两个属性将节点之间以双向链表的形式连接起来。

nodeType:该节点的类型。9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点

6.属性获取、设置、判断

获取属性值:getAttribute()

document.body.getAttribute("style")

设置属性值:setAttribute()

document.body.setAttribute("style","background-color:red")

检测是否存在属性:hasAttribute()

删除属性:removeAttribute()

DOM操作一的更多相关文章

  1. jQuery学习之路(2)-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  2. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  3. 摆脱DOM操作,从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  4. 前端页面卡顿?或是DOM操作惹的祸,需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  5. webform(九)——JQuery基础(选择器、事件、DOM操作)

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  6. HTML 学习笔记 JQuery(DOM 操作)

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  7. dom操作导致超级卡顿。。。

    var i=0;j=30;setinterval(function(){ document.getElementId(idname).style.top=j+'px'; i<3?i++:i=0; ...

  8. php中通过DOM操作XML

    DOM文档在js里早就接触过,知道DOM不但可以操作html文档,还可以操作XHTML,XML等文档,有着极强的通用性,下面我们通过两个小例子,看看在PHP中是如何用DOM操作XML文档的,和js中差 ...

  9. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  10. [译]AngularJS中DOM操作

    再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...

随机推荐

  1. 手写数字0-9的识别代码(SVM支持向量机)

    帮一个贴吧的朋友改的一段代码,源代码来自<机器学习实战> 原代码的功能是识别0和9两个数字 经过改动之后可以识别0~9,并且将分类器的产生和测试部分分开来写,免得每次测试数据都要重新生成分 ...

  2. BZOJ 1426 收集邮票 ——概率DP

    $f(i)$表示现在有$i$张,买到$n$张的期望 所以$f(i)=f(i+1)+\frac {n}{n-i}$ 费用提前计算,每张邮票看做一元,然后使后面每一张加1元 $g(i)$表示当前为$i$张 ...

  3. toolbarlite随笔之插件的闭包写法

    toolbarlite这个东西至今没搞懂是什么玩意.因为除了源代码我实在是找不到除了toolbar之外的任何关于toolbarlite的东西了.不知道toolbarlite是不是toolbar的子集, ...

  4. mongodb的入门学习

    mongodb的入门学习 简介: MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库 ...

  5. android之总结(一)——原

    1,TextView 中实现跑马灯,需求:文字左边留置一段空白,不需要紧靠在左边:设置android:padding android:padding和android:layout_margin这个地方 ...

  6. postman 快捷方式--启动图标

    下载,解压,安装,(此安装位置在/opt) 1.创建全局变量,也就是在任何地方都可以执行postman,不用去到安装目录,执行 : sudo ln -s /opt/postman/Postman /u ...

  7. Free web scraping | Data extraction | Web Crawler | Octoparse, Free web scraping

    Free web scraping | Data extraction | Web Crawler | Octoparse, Free web scraping 人才知了

  8. 【flyway】开源的数据库版本管理工具【migration】

    开源的数据库版本管理工具[migration] 记录

  9. open-falcon的插件机制

    Plugin可以看做是对agent功能的扩充.对于业务系统的监控指标采集,最好不要做成plugin,而是把采集脚本放到业务程序发布包中,随着业务代码上线而上线,随着业务代码升级而升级,这样会比较容易管 ...

  10. cart树剪枝

    当前子树的损失函数: $C_a(T) = C(T) + a|T|$, 其中$C(T)$为对训练数据的预测误差,$|T|$为树的叶子结点数目,反映模型的复杂度.对固定的$a$,一定存在使损失函数$C_a ...