JavaScript DOM知识 (一)
特性、方法 | 类型、返回类型 | 说明 |
nodeName | String | 节点的名字;根据节点类型而定义 |
nodeValue | String | 节点的值;根据节点的类型而定义 |
nodeType | Number | 节点的类型常量值之一 |
ownerDocument | Document | 返回元素的根节点 |
fristChild | Node | 指向在childNodes列表的第一个节点 |
lastChild | Node | 指向在chilidNodes列表的最后一个节点 |
ChildNodes | NodeList | 所有子节点的列表 |
previousSibling | Node | 返回选定节点的上一个同级节点,若没有返回null |
nextSibling | Node | 返回选定节点的下一个同级节点,若没有返回null |
hasChildNodes() | Boolean | 返回当前元素是否还有子节点 |
appendChild(node) | node | 将node添加到childNodes的末尾 |
removeChild(node) | node | 从childNodes中删除node |
replaceChild(new,old) | Node | 将childNodes中的old替换成new |
insertBefore | Node | 在已有子节点之前插入新的节点 |
2、nodeType返回的节点类型
---元素节点返回1
---属性节点返回2
---文本节点返回3
3、innerHTML 和 nodeValue
对于文本节点,nodeValue 属性包含文本;
对于属性节点,nodeValue 属性包含属性值;
nodeValue 属性对于文档节点和元素节点是不可用的。
两者区别:
box.childNodes[0].nodeValue = '<strong>abc</strong>'; //结果为: <strong>abc</strong>
box.innerHTML = '<strong>abc</strong>'; //结果为: abc
4、tagName
document.getElementByTagName(tagName):返回一个数组,包含对这些结点的引用
getElementsByTagName()
方法将返回一个对象数组HTMLCollection(NodeList)
,这个数组保存着所有相同元素名的节点列表。
document.getElementsByTagName('*');//获取所有元素
PS:
IE
浏览器在使用通配符的时候,会把文档最开始的html
的规范声明当作第一个元素节点。
document.getElementsByTagName('li');//获取所有 li 元素,返回数组
document.getElementsByTagName('li')[0];//获取第一个 li 元素,HTMLLIElement
document.getElementsByTagName('li').item(0);//获取第一个 li 元素,HTMLLIElement
document.getElementsByTagName('li').length;//获取所有 li 元素的数目
5、节点的绝对引用:
返回文档的根节点:document.documentElement
返回当前文档中被击活的标签节点:document.activeElement
返回鼠标移出的源节点:event.fromElement
返回鼠标移入的源节点:event.toElement
返回激活事件的源节点:event.srcElement
6、节点的相对引用:(设当前对节点为node)
返回父节点:node.parentNode || node.parentElement(IE)
返回子节点集合(包含文本节点及标签节点):node.childNodes
返回子标签节点集合:node.children
返回子文本节点集合:node.textNodes
返回第一个子节点:node.firstChild
返回最后一个子节点:node.lastChild
返回同属下一个节点:node.nextSibling
返回同属上一个节点:node.previousSibling
7、节点信息
是否包含某节点:node.contains() 是否有子节点node.hasChildNodes()
8、创建新节点
createDocumentFragment()--创建文档碎片节点
createElement(tagname)--创建标签名为tagname的元素
createTextNode(text)--创建包含文本text的文本节点
9、获取鼠标单击事件的位置
var mouseClick = function(e) {
var e = e || window.event; //兼容IE
var x = 0, y = 0;
if(e.pageX) {
x = e.pageX;
y = e.pageY;
} else if(e.clicentX) {
var offsetX = 0, offsetY = 0;
if(document.documentElement.scrollLeft) {
offsetX = document.documentElement.scrollLeft;
offsetY = document.documentElement.scrollTop;
} else if(document.body) {
offsetX = document.body.scrollLeft;
offsetY = document.body.scrollTop;
}
x = e.clientX + offsetX;
y = e.clientY + offsetY;
}
console.log("你点击的位置是" + x + "," + y);
};
document.onclick = mouseClick;
这里我们需要解析下,请看javascript中的scroll事件中解释道,有部分浏览器对scroll事件的实现方式不一样;
三个概念: pageX,clientX,screenX的区别:
1、clientX,clientY表示事件发生时鼠标指针在视口中的水平坐标和垂直坐标:如图
2、pageX,pageY表示在页面中的坐标位置,即在body中的位置;
3、screenX和screenY:鼠标事件发生时,不仅会有相对于浏览器窗口的位置,还有一个相对于整个电脑屏幕的位置。而通过screenX和screenY属性可以确定鼠标事件发生时鼠标指针相对整个电脑屏幕的坐标;
问题一:Firefox
,Chrome
、Safari
和IE9
都是通过非标准事件的pageX
和pageY
属性来获取web页面的鼠标位置的。pageX/Y
获取到的是触发点相对文档区域左上角距离,以页面为参考点,不随滑动条移动而变化
问题二:在IE 中,event
对象有 x
, y
属性(事件发生的位置的 x
坐标和 y
坐标)火狐中没有。在火狐中,与event.x
等效的是 event.pageX
。event.clientX
与 event.pageX
有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。
offsetX
:IE
特有,chrome
也支持。鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder
,可能出现负值
问题三:scrollTop
为滚动条向下移动的距离,所有浏览器都支持document.documentElement
。
其余参照:http://segmentfault.com/a/1190000002559158#articleHeader11
JavaScript DOM知识 (一)的更多相关文章
- javascript DOM知识脑图
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- javascript DOM操作HTML文档
文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...
- 学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
- 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...
- javascript常用知识点集
javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...
- JavaScript DOM编程艺术读后感(1)—— 平稳退化
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...
随机推荐
- MySql索引建立规则
为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索引和创建什么类型的索引.本小节将向读者介绍一些索引的设计原则. 1.选择唯一性索引 唯一性索引的值是唯一的,可以更快速的通过该索引来确 ...
- linux版本查看命令
uname -a显示电脑以及操作系统相关信息 cat /proc/version显示正在运行的内核版本 cat /etc/issue或cat /etc/redhat-release Linux查看版 ...
- HDU - 1260 Tickets 【DP】
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1260 题意 有N个人来买电影票 因为售票机的限制 可以同时 卖一张票 也可以同时卖两张 卖两张的话 两 ...
- 算法(Algorithms)第4版 练习 1.3.13
(a) 0 1 2 3 4 5 6 7 8 9 (b) 4 6 8 7 5 3 2 9 0 1 (c) 2 5 6 7 4 8 9 3 1 0 (d) 4 3 2 1 0 5 6 7 8 9 答案:b ...
- flash滑杆控制图片横向滚动
flash滑杆控制图片横向滚动是一款FLASH动画图片左右滚动素材,滑杆控制滚动,效果很酷,带FLASH源文件. 下载:http://www.huiyi8.com/sc/9452.html
- NOIP 2014【斗地主】
这真是道大火题. 因为保证数据随机,所以开始很多人直接用搜索 + 贪心水过去了,后来,为了遏制骗分这种不良风气的传播,各大 OJ 相继推出了斗地主加强版-- 正解: 先爆搜顺子,枚举打或不打,打多少张 ...
- redis实现分布式锁——核心 setx+pipe watch监控key变化-事务
如何设计一把分布式锁 我们用 redis 来实现这把分布式的锁,redis 速度快.支持事务.可持久化的特点非常适合创建分布式锁. 分布式环境中如何消除网络延迟对锁获取的影响 锁,简单来说就是存于 r ...
- win7 jdk1.7配置环境变量
1.安装目录,C:\Program Files\Java
- codeforces 703D D. Mishka and Interesting sum(树状数组)
题目链接: D. Mishka and Interesting sum time limit per test 3.5 seconds memory limit per test 256 megaby ...
- codeforces 659D D. Bicycle Race(水题)
题目链接: D. Bicycle Race time limit per test 1 second memory limit per test 256 megabytes input standar ...