web第三天

获取相关节点:

1.获取ul
  var ulObj=my$("uu");
2.第二个li
  var liObj=my$("show")

3.父级节点
  console.log(ulObj.parentNode);
4.父级元素
  console.log(ulObj.parentElement);
5.子级节点
  console.log(ulObj.childNodes);
6.子级元素---不加element
  console.log(ulObj.children);

console.log("==============================")
7.第一个子级节点
  console.log(ulObj.firstChild);
8.第一个子级元素
  console.log(ulObj.firstElementChild);
9.最后一个子级节点
  console.log(ulObj.lastChild);
10.最后一个子级元素
  console.log(ulObj.lastElementChild);
11.前一个兄弟节点
  console.log(liObj.previousSibling);
12.前一个兄弟元素
  console.log(liObj.previousElementSibling);
13.后一个兄弟节点
  console.log(liObj.nextSibling);
14.后一个兄弟元素
  console.log(liObj.nextElementSibling);

谷歌和火狐,都是支持获取对应的节点和元素,IE8:从第一个子级节点开始到兄弟节点,都支持通过获取节点的方式获取元素,获取元素的方式不支持

举例:

//获取任意父级元素的第一个子级元素

function getFirstElementChild(element) {
    if (typeof getFirstElementChild){
        return element.firstElementChild;
    } else{
        var node=element.firstChild;
        while (node && node.nodeType !=1){
            node=node.previousSibling;
        }
        return node;
    }
}

 //获取任意父级元素的最后一个子级元素
    function getLastElementChild(element) {
        if (element.lastElementChild) {//支持
            return element.lastElementChild;
        } else {//不支持
            var node = element.lastChild;
            while (node && node.nodeType != 1) {
                node = node.previousSibling;
            }
            return node;
        }
    }

猜你喜欢

转载自blog.csdn.net/zlaiyanm/article/details/88896524