从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM
1:DOM(Document Object Model)的概念和作用
document对象是DOM核心对象:对html中的内容,属性,样式进行操作。
节点树中节点之间的关系:父子,兄弟。
2:DOM常用属性
title:返回或设置当前文档的标题。
all:返回所有元素的集合。
forms:返回对文档中所有form对象的引用。
通过集合来访问相应的对象:
1.通过下标的形式。
2.通过name形式。
3:DOM查询方法
1.getElementById(id):返回拥有指定id的(第一个)对象的引用。
2.getElementsByTagName(tagName):返回有指定标签名的对象集合。
注:上面两个方法没有兼容性问题。
3.getElementsByName(name):返回带有指定name指定名称的对象的集合。有兼容性问题。
在IE9及其以下,如果该对象的标准属性包含有name,(比如说input,在input中name是input的默认属性,所以可以正常使用,但是在div中name并不是div的默认属性,所以不能正常显示),那么可以正确的使用。否则不可以使用。在火狐中,该方法可以适用于任何情况。
结论: getElementsByName(name)主要是适用于表单。
4.write:输出内容到页面。(注:网页加载完成后进行输出,则覆盖整个网页,使用时需注意)
5.getElementsByClassName():返回带有指定className指定名称的对象的集合。有兼容性问题,适用于火狐浏览器,在IE浏览器中不可用(IE8及以下不可用)。
封装获取className值的DOM节点的兼容性的函数。
4:操作内容
1.innerHTML:用来设置或获取对象起始和结束标签内(例如div框架,它只会获取div里面的内容,而不会获取div)的内容(识别html标签) 。
2.innerText:用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE,最新版火狐已支持)。
textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐,IE8及其以下不支持)。
3.outerHTML 用来设置或获取包括本对象在内的起始和结束标签内(例如div框架,不仅会获取div里面的内容,也会获取div自身的内容)的内容(识别html标签) 。
4.outerText 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)(火狐不支持)。
5:操作属性
1.直接操作
对象.属性。 // 获取属性。某些属性有兼容性问题,例如name(如果不是标签特有的属性,在chrome/firfox访问不到,在IE8及其以下浏览器能获取的到)。
对象.属性=值 // 设置、添加属性(属性值)。
2.通过方法
getAttribute(“属性”)。 // 获取给定的属性的值。
setAttribute(“属性”,“值”)。 // 设置或是添加属性。
removeAttribute(“属性”)。 // 删除属性。
6:操作样式
1.行内样式
对象.style.属性 // 获取样式属性
对象.style.属性=值 // 设置、添加样式属性。
注: 遇到属性是“-”链接的,要将“-”去掉,后面的单词的首字母大写。
2.行内样式和css层叠样式通用的方式
对象.currentStyle.属性 IE 用来获得实际的样式属性。
getComputedStyle((对象,null).属性) 火狐 用来获得实际的样式属性。
注:只能获取不能设置。
7:DOM增删改
一:创建节点(注释和文档节点一般不需要创建)
1:创建元素节点
document.createElement("元素标签名");
2:创建属性节点
var oAttr = document.createAttribute(“属性名”);(不常用)
oAttr.value = "attr-name";
oDiv.setAttributeNode(oAttr);
对象.属性=属性值;(常用)
3:创建文本节点
对象.innerHTML = "";
var oText = document.createTextNode(“文本”); // 文本中的HTML标签实体化
oDiv.appendChild(oText);
二:追加到页面当中
父对象.appendChild(newNode) // 插入到父对象最后。
父对象.insertBefore(newNode, existsNode) // 插入到什么对象之前。
三:修改(替换)节点
父对象.replaceChild(newNode,existsNode); // 前面的替换后面的
四:删除节点
父对象.removeChild(oldNode);
如果确定要删除节点,最好也清空内存 对象=null;
五:表格操作
table.tBodies[0].rows[0].cells[0].innerHTML;
var oNewRow = table.insertRow(“行位置”);
oNewRow.insertCell(“列位置”);
从零开始学习前端JAVASCRIPT — 6、JavaScript基础DOM的更多相关文章
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- 从零开始学习前端JAVASCRIPT — 1、JavaScript基础
1:定义:javascript是一种弱类型.动态类型.解释型的脚本语言. 弱类型:类型检查不严格,偏向于容忍隐式类型转换. 强类型:类型检查严格,偏向于不容忍隐式类型转换. 动态类型:运行的时候执行类 ...
- 从零开始学习前端JAVASCRIPT — 2、JavaScript基础ES5
1:ES5简介 ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准的修正. 与HTML5规范进程本质类似,ES5通过对现有JavaScript ...
- 从零开始学习前端JAVASCRIPT — 7、JavaScript基础EVENT
1:事件驱动 1)事件:所谓事件就是js侦测到的用户的操作或是页面的一些行为(怎么发生的) 2)事件源对象:引发事件的元素.(发生在谁的身上) 3)事件处理程序:对事件处理的程序或是函数 (发生了什么 ...
- 从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScript6.0)
ECMAScript 6.0(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了.它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发 ...
- 从零开始学习前端JAVASCRIPT — 9、JavaScript基础RegExp(正则表达式)
1:正则的概念 正则表达式(regular expression)是一个描述字符规则的对象.可以用来检查一个字符串是否含有某个子字符串,将匹配的子字符串做替换或者从某个字符串中取出符合某个条件的子串等 ...
- 从零开始学习前端JAVASCRIPT — 8、JavaScript基础COOKIE
1:通信协议 定义:通信协议是指双方实体完成通信或服务所必须遵循的规则和约定.协议定义了数据单元使用的格式,信息单元应该包含的信息与含义,连接方式,信息发送和接收的时序,从而确保网络中数据顺利地传送到 ...
- 从零开始学习前端JAVASCRIPT — 4、JavaScript基础Math和Date对象的介绍
Math对象的介绍 1:Math对象 Math 对象用于执行数学任务.并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math().您无需创建它,通过把 Math 作为对象使用就 ...
- 从零开始学习前端JAVASCRIPT — 3、JavaScript基础string字符串介绍
1:字符串 JS中的任何数据类型都可以当作对象来看.所以string既是基本数据类型,又是对象. 2:声明字符串 基本数据类型:var sStr = '字符串'; 对象的方法:var oStr = n ...
随机推荐
- RabbitMQ教程(一) ——win7下安装RabbitMQ
RabbitMQ依赖erlang,所以先安装erlang,然后再安装RabbitMQ; 下载RabbitMQ,下载地址: rabbitmq-server-3.5.6.exe和erlang,下载地址:o ...
- Linux下防火墙配置
查看防火墙的状态:/etc/init.d/iptables status 或 service iptables status 1) 临时生效,重启后复原 开启: service iptab ...
- 【原创】java NIO FileChannel 学习笔记 FileChannel实现分析 即FileChannelImpl分析
上文已经说了FileChannel是一个抽象类,FileChannelImpl是其实现,接下来介绍FileChannelImpl,参考代码来自OpenJDK7 首先 public class File ...
- 一、JavaSE语言概述
1.软件:系统软件 VS 应用软件 2.人与计算交互:使用计算机语言.图形化界面VS命令行. 3.语言的分类:第一代:机器语言 第二代:汇编语言 第三代语言:高级语言(面向过程-面向对象) 4.jav ...
- 2017 年终总结 & 2018 年度计划
不立几个 Flag,都不知道怎么作死 2017 年度计划完成情况: 1.健身时间不少于350天: 未完成 中断了22天,实际运动 343天 2.至少每个月看一本书: 及格 <切尔诺贝利的 ...
- python键盘读入的input方法
今天了解了一下python,学了一些小东西,便存下了: input函数(raw_input在3.0版本没有,所以就不说了!) num = input ("输入一个数:") |备注 ...
- Linux下用ls和du命令查看文件以及文件夹大小
ls的用法 ls -l |grep "^-"|wc -l或find ./company -type f | wc -l 查看某文件夹下文件的个数,包括子文件夹里的. ls -lR ...
- Java学习笔记11(面向对象四:多态)
多态: 举例:描述一个事物的多种形态,如Student类继承了Person类,一个Student对象既是Student,又是Person 多态体现为:父类引用变量可以指向子类对象 多态的前提:必须有子 ...
- python_IO编程
本篇文章将介绍python里面的I/O编程.更多内容请参考:python学习指南 I/O编程 读写文件时最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们必须了解 ...
- 修改MySQL 5.7.9版本的root密码方法以及一些新变化整理
MySQL 5.7版本开始,增强密码验证机制,网上说安装的时候会在/root/.mysql_secret 文件中生成默认密码,这一点自 5.7.6版本以后也去掉了. 针对如果生成默认密码,网上有一个 ...