第三章

第三章

JavaScript操作DOM对象

1.使用getElement系列方法访问指定节点

1.getElementById()

2.getElementsByName()

3.getElementsByTagName()

2.根据层次关系访问节点

1.节点属性
parentNode                  返回节点的父节点

childNodes                  返回节点的所有的子节点，包括元素节点、文本节点等
                            （表现为伪数组形式，可用childNode[]选择具体的第几号子节点）
                            （需要用专门的筛选语句提取单一类型节点，一般不推荐使用该节点属性）
附筛选语句：var ul = document.querySelector("ul");
           for (var i = 0; i < ul.childNodes.length; i++){
               if (ul.childNodes[i].nodeType == 1){
                  console.log (ul.childNodes[i]);
               }
           }

firstChild                  返回节点的第一个子节点，不区别元素类型（元素节点、文本节点等）
lastChild                   返回节点的最后一个子节点，不区别元素类型
                            （两者在实际的使用中，并不方便）
                            
nextSibling                 下一个节点，不区别元素类型（元素节点、文本节点等）
previousSibling             上一个节点，不区别元素类型

children                    仅返回节点的所有子节点中的元素节点（重点！！！！！！！！！！！！）
                            (非标准语句，但非常好用！！！！！！！！！！！！！！！！！！！！)

2.元素属性
firstElementChild            返回节点的第一个子“元素节点”
lastElementChild             返回节点的最后一个子“元素节点”
                             （IE9 以上的浏览器方可兼容，存在兼容性问题）

解决方案：children （使用简便，无兼容性问题，推荐使用！！！！！！！！！！！！！！！！！！！）
标签名.firstElementChild          等价于==>        标签名.children[0]
标签名.lastElementChild           等价于==>        标签名.children[标签名.children.length-1]

nextElementSibling	         下一个“元素节点”
previousElementSibling       上一个“元素节点”

3.节点信息
nodeName                 节点名称
nodeValue                节点值
nodeType                 节点类型


节点类型              nodeType值
元素element               1
属性attr                  2
文本text                  3
注释comments              8
文档document              9

注：两者一一对应，用来帮助判断节点类型

3.操作节点

1.操作节点的属性
getAttribute("属性名")

setAttribute("属性名","属性值")

2.创建节点
createElement(tagName)          创建一个标签名为tagName的新元素节点
例：var aEle = document.createElement("a");      创建一个超链接节点

A.appendChild(B)                把B节点追加至A节点的末尾（B成为A的子节点）
例：nmTd.appendChild(nmText);

insertBefore(A,B)               把A节点插入到B节点之前

cloneNode(deep)                 复制某个指定的节点

3.删除和替换节点
removeChild(node)                         删除指定的节点
                        （父节点才有权限删除子节点，故需要先找到该节点的父节点，再删除该节点）
例：var delNode=document.getElementById("first");
    delNode.parentNode.removeChild(delNode);

replaceChild(newNode,oldNode)属性attr 	用其他的节点替换指定的节点
例：var oldNode=document.getElementById("second");
    var newNode=document.createElement("img");
    newNode.setAttribute("src","images/f03.jpg");
    oldNode.parentNode.replaceChild(newNode,oldNode);

4.操作节点样式

1.style属性
HTML元素.style.样式属性＝"值"

例：document.getElementById("titles").style.color="#ff0000"; 
    document.getElementById("titles").style.fontSize="25px";

onclick             当用户单击某个对象时调用事件
onmouseover         鼠标移到某元素之上
onmouseout          鼠标从某元素移开
onmousedown         鼠标按钮被按下

2.className属性
HTML元素.className="样式名称"

例：function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
     }
    function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

3.获取元素的样式
HTML元素.style.样式属性;

例：alert(document.getElementById("cartList").display);

document.defaultView.getComputedStyle(元素,null).属性;

例：var cartList=document.getElementById("cartList");
    alert(document.defaultView.getComputedStyle(cartList,null).display);

HTML元素. currentStyle.样式属性;

例：alert(document.getElementById("cartList").currentStyle.display);

5.HTML中的元素属性

offsetLeft            返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop             返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight          返回元素的高度
offsetWidth           返回元素的宽度
offsetParent          返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop             返回匹配元素的滚动条的垂直位置
scrollLeft            返回匹配元素的滚动条的水平位置
clientWidth           返回元素的可见宽度
clientHeight          返回元素的可见高度

应用
1.标准浏览器
document.documentElement.scrollTop;
document.documentElement.scrollLeft;

2.Chrome
document.body.scrollTop;
document.body.scrollLeft;

例：var sTop=document.documentElement.scrollTop||document.body.scrollTop;