特性、方法 类型、返回类型 说明
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. Nginx + Tomcat 应用证书启用 SSL

    第一部分 简述 - 附:相关概念 1 Nginx 是什么? - 2 Tomcat 是什么? - 3 SSL 是什么? Secure Sockets Layer,现在应该叫"TLS" ...

  2. 【shell】shuf命令,随机排序

    shuf命令主要用来对输入的每一行进行随机排序输出,我们可以利用这个属性,实现在几个文件中随机读取一个的功能 如下,zls.txt文件有三行,我们想要随机从中读取一行. 可以看到,每次读取顺序都不一样 ...

  3. Spring Aop切点

    切点用于准确定位应该在什么地方应用切面的通知.通知和切点是切面的最基本的元素.在Spring AOP中要使用AspectJ的切点表达式来定义切点.下面我们列出Spring AOP所支持的AspectJ ...

  4. 剑指Offer:二叉树中和为某一值的路径【34】

    剑指Offer:二叉树中和为某一值的路径[34] 题目描述 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. ...

  5. 【Leetcode-easy】Remove Nth Node From End of List

    思路1:设置两个指针p1,p2指向表头,p1先走n步.再两个指针同时走.当p1指针指到链表尾部时,P2指针已经在需要删除节点的前一位.一定要注意一些细节. class ListNode { int v ...

  6. 《avascript 高级程序设计(第三版)》 ---第三章 基本概念

    本章主要介绍Javasript语言的一些语法: 1.严格模式:开启:"use strict"; 2.变量:全部用var来定义,在函数中使用的称为局部变量,不能全局使用. 3.数据类 ...

  7. 51nod 1189

    题目 神犇题解 表示自己数论渣成狗...膜拜神犇. n!*(x+y)=x*y n!^2=(x-n!)*(y-n!) 那么求出n!^2的因数个数就可以了.

  8. linux shell发送邮件

    我的系统环境: [root@NPS-JK ~]# cat /etc/issue Red Hat Enterprise Linux Server release 6.1 (Santiago) Kerne ...

  9. jumpserver v3.0

    文档地址 www.php230.com/weixin1451347094.html

  10. tensorflow knn mnist

    # MNIST Digit Prediction with k-Nearest Neighbors #----------------------------------------------- # ...