javascript学习第六天（Bom运动框架，Dom节点）

最新推荐文章于 2022-12-23 21:17:23 发布

sunshinetz

最新推荐文章于 2022-12-23 21:17:23 发布

阅读量190

点赞数

分类专栏： javascript 文章标签： js

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

对于div说，如果想让他动起来，设置元素绝对定位，只有设置元素绝对定位后，left,top值的值才生效
定时器的使用(动态改变值），这里使用setInterval()每隔指定时间执行代码，以恒定的位置改变物体的运动的值
取消计时器clearInterval(函数）方法可取消由setInterval()设置的交互时间。
获取当前的位置，大小等等。offseyLeft(当前元素相对父元素的位置).
速度-物体运动的快慢
定时器间隔的时间
改变值的大小

1. 获取当前页面滚动条纵坐标的位置：document.documentElement.scrollTop||document.body.scrollTop
获取当前页面滚动条横坐标的位置：document.documentElement.scrollLeft||document.body.scrollLeft
2.document.body.clientWidth=>body对象的宽度
document.body.clientHeight=>body对象的高度
document.documentElement.clientWidth==>可见区域宽度
document.documentElenment.clientHeight==>可见区域高度
3.javascript函数：
onload当页面加载完毕的时候触发
onresize当页面的大小改变时触发

onscroll当滚动条滚动的时候触发

4.childNodes属性可以用来获取任何一个元素的所有子元素，是一个包含这个元素的全部元素的数组。
里边是所有类型的节点，甚至包括空格和换行符都会被解释为节点。还好每一个节点都有nodeType的属性，
这个属性可以让我们知道自己正在与哪一个节点打交道。

元素节点的nodeType属性值是1
属性节点的nodeType属性值是2
文本节点的nodeType属性值是3

可以根据文本节点的属性值，来选择合适的样式进行操作。

5.children 属性，非标准的，它返回指定元素的子元素集合。它只返回HTML节点，甚至不返回文本节点。
且在所有浏览器下表现一致。和childNodes 一样，在Firefox下不支持()取集合元素。
因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的函数。
需注意children在IE中包含注释节点。

6.href="javascript:;"，其中javascript:是伪协议.javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码，
而 javascript:; 表示什么都不执行，这样点击<a>时就没有任何反应。
href="javascript:;"就是去掉a标签的默认行为，跟href="javascript:void(0)"是一样的

7.parentNode 属性可返回某节点的父节点。当某个元素没有对应的父节点的时候，返回对应的节点值为null.

首尾子节点（有兼容性问题)
firstChild、firstElementChild (返回的是元素的节点，不包含空文本）
lastChild 、lastElementChild
兄弟节点
nextSibling、nextElementSibling
previousSibling、previousElementSibling
offsetParent()函数用于查找离当前匹配的元素最近的被定位的祖辈的元素。

8.javascript 获取和设置属性getAttribute setAttribute,getAttribute只有一个参数，所查询属性的名字

9.创建DOM元素
createElement(标签名) 创建一个节点
appendChild(节点) 追加一个节点
父节点.appendChild(子节点）
插入元素
insertBefore(节点, 原有节点) 在已有元素前插入
当在固定的位置插入节点的时候，需要获取原有节点的数组，在某个节点前插入
删除DOM元素
removeChild(节点) 删除一个节点
例子：删除li，一般用this的节点指代。

10.文档碎片可以提高DOM操作性能(理论上)
文档碎片原理
document.createDocumentFragment()，
之后可以用文档碎片的对象去拼接创建的字符串，之后再用父节点去拼接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.οnlοad=function ()
{
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');

oBtn.οnclick=function ()
{
var iStart=new Date().getTime();
var oFrag=document.createDocumentFragment();
var i=0;

for(i=0;i<100000;i++)
{
var oLi=document.createElement('li');

oFrag.appendChild(oLi);
}

oUl.appendChild(oFrag);

alert(new Date().getTime()-iStart);
}
}
</script>
</head>

<body>
<input id="btn1" type="button" value="碎片"/>
<ul id="ul1">
</ul>
</body>
</html>