特性、方法 类型、返回类型 说明
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属性可以确定鼠标事件发生时鼠标指针相对整个电脑屏幕的坐标;

问题一:FirefoxChromeSafariIE9都是通过非标准事件的pageXpageY属性来获取web页面的鼠标位置的。pageX/Y获取到的是触发点相对文档区域左上角距离,以页面为参考点,不随滑动条移动而变化

问题二:在IE 中,event 对象有 x, y 属性(事件发生的位置的 x 坐标和 y 坐标)火狐中没有。在火狐中,与event.x 等效的是 event.pageXevent.clientXevent.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。

offsetX:IE特有,chrome也支持。鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

问题三:
scrollTop为滚动条向下移动的距离,所有浏览器都支持document.documentElement

其余参照:http://segmentfault.com/a/1190000002559158#articleHeader11

JavaScript DOM知识 (一)的更多相关文章

  1. javascript DOM知识脑图

  2. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  3. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  7. 《javascript dom编程艺术》笔记(一)——优雅降级、向后兼容、多个函数绑定onload函数

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  8. javascript常用知识点集

    javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...

  9. JavaScript DOM编程艺术读后感(1)—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

随机推荐

  1. 性能测试--Jmeter随机生成/随机选取/csv读取关键字

    Jmeter随机生成/随机选取/csv读取关键字 一.随机生成关键字 随机生成关键字,需要组件:随机变量配置元件(Random Variable)  该组件的作用是生成字符+随机数字格式的字符串,并保 ...

  2. 我的Java开发学习之旅------>Java经典排序算法之选择排序

    一.算法原理 对比数组中前一个元素跟后一个元素的大小,如果后面的元素比前面的元素小则用一个变量k来记住他的位置, 接着第二次比较,前面"后一个元素"现变成了"前一个元素& ...

  3. mapreduce的一个模版

    import java.io.IOException; import java.text.DateFormat; import java.text.SimpleDateFormat; import j ...

  4. 设置sudo的过期时间

    默认sudo的过期时间过短,经常要输入密码 sudo visudo Defaults env_reset找到这行代码 后面加上timestamp_timeout参数,数值是分钟 ,timestamp_ ...

  5. web 全栈 学习 2 一个好的页面是如何炼成的

    第一章:Web页面内容的构成2.Web内容的分工一个Web页面可能的构成(视觉上看):①文字.链接.标题②交互入口(表单元素)③图片(哪些类型)④动画 Flash动画 HTML5 CSS3 动画⑤音视 ...

  6. BZOJ 3990 [SDOI2015]排序

    题解: 首先很容易看出各个操作是互不影响的,即对于一个合法的操作序列,我们可以任意交换两个操作的位置而不影响合法性. 因此我们可以忽略操作先后的影响,只考虑这个操作是否会出现在操作序列中. 如果用2n ...

  7. Sprin Boot2.0之整合Mybatis整合分页插件

    pageHelper PageHelper 是一款好用的开源免费的 Mybatis 第三方物理分页插件 物理分页 支持常见的 12 种数据库.Oracle,MySql,MariaDB,SQLite,D ...

  8. 计算机中丢失OPENGL.dll

    开发OpenGL项目时,在VS开发环境下可能会出现如图所示的错误. 在c:\windows\system32和SysWow64文件夹下存在opengl32.dll,此时,所写程序能够正常编译,但是,程 ...

  9. php设计模式课程---5、责任链模式是什么

    php设计模式课程---5.责任链模式是什么 一.总结 一句话总结: 自己权限不够,就交给上级处理 1.选择结构怎么做到面向对象开闭原则? 也就是说if,都可以用接口的实现来实现,这样就避免了更新的时 ...

  10. Apache-SimpleEmail 简单应用

    比JavaMail使用方法要直接,jar包只需要在JavaMail的基础上添加commons-email-1.4.jar即可. 代码: // QQ邮箱发送邮件 SimpleEmail simpleEm ...