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前端开发 ...
随机推荐
- JDBC通用方法实现
在一些测试项目中会用到纯粹的jdbc操作数据库,下面提供统一的方法实现. import java.sql.CallableStatement; import java.sql.Connection; ...
- RK平台images打包细则【转】
本文转载自;https://blog.csdn.net/wangxueming/article/details/52808739 IMGs打包细节 平台: RK3288 背景: RK3288编译产生了 ...
- linux中fflush函数和printf函数 【转】
本文转载自:http://blog.chinaunix.net/uid-30058258-id-5029847.html printf是一个行缓冲函数printf函数是标准函数,最终会调用到系统调用函 ...
- js中的window.open返回object的错误
系统中用javascript中的window.open后,页面返回了一个[object].因为系统的原因,必需使用href="javascript:window.open()"这样 ...
- Vue.js devtool插件安装后无法使用的解决办法
初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...
- python_opencv库的学习
一.以灰度图的形式加载彩色图像. https://docs.opencv.org/3.0-beta/doc/py_tutorials/py_gui/py_image_display/py_image_ ...
- python的join()函数
def join(self, iterable): # real signature unknown; restored from __doc__ """ S.join( ...
- java异常的原理以及应用
父类Throwable 两个分支: error:合理的应用程序不应该出现的严重问题,可以无需声明便抛出,比如内存溢出. Exception:程序还能够克服和恢复的问题. 其中又分为系统异常和普通异常. ...
- DLL进一步讲解:extern "C" __declspec(dllexport)
一.__declspec(dllexport): 将一个函数声名为导出函数,就是说这个函数要被其他程序调用,即作为DLL的一个对外函数接口. 通常它和extern "C" ...
- ACM学习历程—Hihocoder编程之美测试赛B题 大神与三位小伙伴(组合数学 )
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给你一个m x n (1 <= m, n <= 100)的矩阵A (0<=aij<=10000),要 ...