JavaScript操作DOM的那些坑

scrollTop为滚动条向下移动的距离，所有浏览器都支撑document.documentElement。

【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！

js在操作DOM中存在着很多跨浏览器方面的坑，本文花了我将近一周的时光┞符理，我将根据实例整顿那些大年夜大年夜小小的“坑”。

DOM的工作模式是：先加载文档的静态内容、再以动态方法对它们进行刷新，动态刷新不影响文档的静态内容。

Node 接口

firstChild 相当于 childNodes[0];lastChild 相当于childNodes[box.childNodes.length - 1]。

nodeType返回结点的类型

--元素结点返回1

--属性结点返回2

|dragover | 拖动到目标上，用来决定给用户的反馈

getComputedStyle(obj , false ) 是支撑 w3c (FF12、chrome 14、safari)：在FF新版本中只须要第一个参数，即操尴尬刁难象，第二个参数写“false”也是大年夜家通用的写法，目标是为了兼容老版本的火狐浏览器。

--文本结点返回3

对于文本节点，nodeValue 属性包含文本。

对于属性节点，nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是弗采取的。

两者差别

box.childNodes[0].nodeValue = '<strong>abc</strong>';//结不雅为：<strong>abc</strong> 
 
abcbox.innerHTML = '<strong>abc</strong>';//结不雅为：abc

nodeName属性获得结点名称

--对于属性结点返回的是属性名称,如：class="test" 返回的是test

--对于文本结点返回的是文本的内容

tagName

document.getElementByTagName(tagName)：返回一个数组，包含对这些结点的引用

getElementsByTagName()办法将返回一个对象数组 HTMLCollection(NodeList)，这个数组保存着所有雷同元素名的节点列表。

返回鼠标移出的源节点：event.fromElement

--对于元素结点返回的是标记名称,如：<a herf><a>返回的是"a"

document.getElementsByTagName('*');//获取所有元素

document.getElementsByTagName('li');//获取所有 li 元素，返回数组 
 
document.getElementsByTagName('li')[0];//获取第一个 li 元素，HTMLLIElement 
 
document.getElementsByTagName('li').item(0);//获取第一个 li 元素，HTMLLIElement 
 
document.getElementsByTagName('li').length;//获取所有 li 元素的数量

节点的绝对引用：

返回文档的根节点：document.documentElement

返回当前文档中被击活的标签节点：document.activeElement

返回鼠标移入的源节点：event.toElement

返回激活事宜的源节点：event.srcElement

节点的相对引用：(设当前对节点为node)

返回父节点：node.parentNode || node.parentElement(IE)

返回子节点集合(包含文本节点及标签节点)：node.childNodes

返回子标签节点集合：node.children

返回子文本节点集合：node.textNodes

返回第一个子节点：node.firstChild

返回同属下一?节点：node.nextSibling

返回同属上一个节点：node.previousSibling

节点信息

是否包含某节点：node.contains()

是否有子节点node.hasChildNodes()

| dragstart | 拖拽事宜开端 |

创建新节点

createDocumentFragment()--创建文档碎片节点

createElement(tagname)--创建标签名为tagname的元素

createTextNode(text)--创建包含文本text的文本节点

获取鼠标点击事宜的地位

以下所描述的属性在chrome和Safari 都很给力的支撑了。

问题一：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,可能出现负值

1/10 1 2 3 4 5 6 下一页尾页

　　推荐阅读

　　利用卷积自编码器对图片进行降噪

【技巧沙龙】AI开辟者拭魅战营-7分钟打造1个定制技能。7月22号，我们等你一路！这周工作太忙，本来想更把 Attention tranlsation 写出来，但一向抽不出时光，等后面有时光再来写。我们这>>>详细阅读

本文标题：JavaScript操作DOM的那些坑

地址：http://www.17bianji.com/lsqh/36299.html

1/2 1