从零开始学习前端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 ...
随机推荐
- CSS实现商城分类导航效果(hover选择器)
学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...
- windows 运行banana
1 git clone 工程 2 安装 npm 3 执行 npm install -g bower
- 中国孩子的micro:bit:TurnipBit自制小乐器教程实例
孩子们是最贪玩的也是最聪明的,因此在过去的数年中,市面上出现了不少寓教于乐的理工科知识(STEM)学习新方法.如今这类产品中又有了一名新成员,TPYBoard重磅推出一款针对小白.中小学生的可编程计算 ...
- 机器学习笔记3-Tensorflow简介
前言 前面两篇主要写了一些机器学习的基础概念,从本篇开始我们来了解下深度学习.深度学习是机器学习的一个子集,是一种特殊的数学模型.同样是从输入到输出,深度学习在这两者之间会有很多层称为"隐层 ...
- android自定义文本框,后面带清空按钮
android常见的带清空按钮的文本框,获得焦点时如果有内容则显示,否则不显示 package com.qc.health.weight; import com.qc.health.R; import ...
- Java学习笔记19(String类)
String代表字符串,在Java中,所有的字符串字面值都作为此类的实例实现 字符串的特点以及简单的原理分析: package demo; /* * String类的特点: * 所有的"&q ...
- JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 http://www.jq22.com/jquery-info13 ...
- centos6.8 docker0: iptables: No chain/target/match by that name
现象:之前docker gitlab运行的一直好好的,突然有一天访问不了,但容器却还运行着.于是我把gitlab容器重启,发现启动不了了,报错:docker0: iptables: No chain/ ...
- Python基础知识拾遗
彻底搞清楚python字符编码 python的super函数
- C# Split 字符文本中的字符太多
问题: ] { '<h1>', '</h1>' }); 原因: Split()里面是用char类型不是string字符串类型,所以只能用一个字符,必须先把多个字符替换成一个字符 ...