javascript学习总结(二):DOM常用方法。
1 获取元素节点
a document.getElementById(id),它返回一个对象。是Document对象特有的函数,它还有这些方法:
b element.getElementsByTagName(tagname)或document.getElementsByTagName(tagname),它返回一个对象数组
c HTML5 Dom中的新方法:document.getElementsByClassName(className)它返回一个对象数组
若浏览器不支持此方法,则自己写一个:
function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
var results = new Array();
var elems = document.getElementsByTagName("*");
for (var i=0; i<elems.length; i++) {
if (elem[i].className.indexOf(classname) !=-1)
results[results.length] = elems[i];
}
}
return results;
}
2 获取和设置属性
a object.getAttribute(attribute),它不属于document对象,只能通过元素节点调用
b object.setAttribute(attribute,value);同样只能通过元素节点调用
3 事件处理函数

4 HTML DOM Element 对象的常用属性和方法
element.childNodes 返回元素子节点的列表。
element.firstChild 返回元素的首个子节点。
element.lastChild 返回元素的最后一个子节点。
element.nextSibling 返回位于相同节点树层级的下一个节点(兄弟节点)。
element.nodeValue 设置或返回元素值。
element.parentNode 返回元素的父节点。
element.removeChild() 从元素中移除子节点。
element.replaceChild() 替换元素中的子节点。
nodelist.length 返回 NodeList 中的节点数。
参考:
http://www.w3school.com.cn/
JavaScripts DOM编程艺术 第2版
javascript学习总结(二):DOM常用方法。的更多相关文章
- JavaScript学习记录二
title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...
- javascript学习(二) DOM操作HTML
一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...
- javascript学习 真正理解DOM脚本编程技术背后的思路和原则
本文学习来源于<javascriptDOM编程艺术>仅作笔记 学会怎样才能利用DOM脚本编程技术以一种既方便自己更体贴用户的方式去充实和完善你们的网页. 循序渐进:从最核心的内容开始,逐步 ...
- javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- javascript学习笔记二
1.js的string对象 **创建 String对象 *** var str = "abc"; **方法 和 属性(文档) *** 属性 length : 字符串的长度 ***方 ...
- JavaScript学习总结(二十三)——JavaScript 内存泄漏教程
参考教程:http://www.ruanyifeng.com/blog/2017/04/memory-leak.html 一.什么是内存泄漏? 程序的运行需要内存.只要程序提出要求,操作系统或者运行时 ...
- javascript学习笔记之DOM
DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象
一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...
- JavaScript学习总结(二)——闭包、IIFE、apply、函数与对象
一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...
随机推荐
- 原来在linux上切换jdk的版本是这么简单
上次在linux上切换jdk版本的时候,还配置了半天的环境变量,今天又查了一下,原来是这么的简单 1. 查看相应的jdk是否在 ubuntu的jdk菜单里,查看: (输全哦) update-alter ...
- 使用UG UISTYLER 窗体编辑器,创建对话框 part 1
在UG 二次开发中,经常需要一些交互的输入,参数的更改啊,零件的选取什么的,UG 自身提供了创建这一类对话框的功能.当然也可以使用MFC或winForm 作为交互.但使用自带的比较快和简洁,风格也统一 ...
- JDK 对应的设计模式
一.设计模式是什么 (1)反复出现问题的解决方案 (2)增强软件的灵活性 (3)适应软件不断变化二.学习JDK中设计模式的好处 (1)借鉴优秀代码的设计,有助于提高代码设计能力 (2)JDK的设计中体 ...
- Angularjs路由需要了解的那点事
Angularjs路由需要了解的那点事 我们知道angularjs是特别适合单页面应用,为了通过单页面完成复杂的业务功能,势必需要能够从一个视图跳转到另外一个视图,也就是需要在单个页面里边加载不同的模 ...
- Xamarin.Android之MvvmCross
欢迎大家加入以下开源社区 Xamarin-Cn:https://github.com/Xamarin-Cn Mvvmcross-Cn:https://github.com/Mvvmcross-Cn ...
- SVN分支管理策略个人见解
本篇目录 前言 SVN分支管理策略 VisualSVN Server TortoiseSVN客户端 Repository的创建 Check out trunk创建新项目MyProject trunk更 ...
- 从一个简单例子来理解js引用类型指针的工作方式
<script> var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined conso ...
- nginx(1、正向代理)
正向代理是指客户端通过代理服务器访问某一个服务器,最常见的例子是内网用户通过代理访问外网,以及所谓的“FQ”. 在windows下实例如下: 1.下载安装包:nginx-1.7.9.zip: 2.解压 ...
- javascript中this指针探讨
javascript是一门类java语言有很多跟java相类似的特点,但也仅是类似而已,真正使用中还是有很大的差别.this指针常常让很多初学者抓狂,本人也曾为此困惑不解,查找过很多资料,今天在这里总 ...
- java实现输入一行字符,分别统计出其中英文字母、空格、数字和其它字符的个数。
package JingDian; import java.util.Scanner; public class charKind { public static void main(String[] ...