兼容和节点

最新推荐文章于 2024-08-29 20:00:00 发布

weixin_44740410

最新推荐文章于 2024-08-29 20:00:00 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/weixin_44740410/article/details/88875045

版权

节点的操作
文档对象:document
元素:element 页面中所有的标签,元素--标签--对象
节点:页面中索引的内容(标签属性文本)

节点的属性:
NodeType:节点的类型 1--表示标签 2--表示属性 3--文本
NodeName:节点的名字1--大写的标签名字属性--小写的属性名字文本节点--#text
NodeValue:节点的值标签--null 属性--属性值文本--文本内容

节点操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="dv">
<span>这是span标签</span>
<div>这是div标签</div>
<ul id="uu">
<li>只是第1个li</li>
<li>只是第2个li</li>
<li>只是第3个li</li>
<li>只是第4个li</li>
<li>只是第5个li</li>
</ul>
</div>
<script src="comen.js"></script>
<script>
//获取无序列表
var ulObj=my$("uu") ;

//获取ul的父级节点
console.log(ulObj.parentNode);
console.log(ulObj.parentElement);

//节点属性---nodeTYpe,nodeName,nodeValue
console.log(ulObj.parentNode.nodeType);
console.log(ulObj.parentNode.nodeName);
console.log(ulObj.parentNode.nodeValue);

//获取ul的父级元素
</script>
</body>
</html>

获取相关节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="dv">
    <span>这是span标签</span>
    <div>这是div标签</div>
    <ul id="uu">
        <li>只是第1个li</li>
        <li id="show">只是第2个li</li>
        <li>只是第3个li</li>
        <li>只是第4个li</li>
        <li>只是第5个li</li>
    </ul>
</div>
<script src="comen.js"></script>
<script>
    //获取子级元素和子级节点
    var dvObj=my$("dv");
    //获取子级节点
    console.log(dvObj.childNodes);
    //获取子级元素
    console.log(dvObj.children);

    //遍历获取div的所有子节点
   /* var nodeObjs=dvObj.childNodes;
    for (var i=0;i<nodeObjs.length;i++){
        var node=nodeObjs[i];
        console.log(node.nodeType+"==="+node.nodeName+"==="+node.nodeValue);
    }*/

    //获取div的id属性节点
    var idNode=dvObj.getAttributeNode("id");
    console.log(idNode.nodeType+"====="+idNode.nodeName+"====="+idNode.nodeValue);

</script>
<script>
    var liObj=my$("show");
    var ulObj=my$("uu");
    //父级节点
    console.log(ulObj.parentNode);
    //父级元素
    console.log(ulObj.parentElement);
    //子级节点
    console.log(ulObj.childNodes);
    //子级元素
    console.log(ulObj.children);
    console.log("====================");
    //第一个子级节点
    console.log(ulObj.firstChild);
    //第一个子级元素
    console.log(ulObj.firstElementChild);
    //最后一个子级节点
    console.log(ulObj.lastChild);
    //最后一个子级元素
    console.log(ulObj.lastElementChild);
    //前一个兄弟节点
    console.log(liObj.previousElementSibling);
    //前一个兄弟元素
    console.log(liObj.previousElementSibling);
    //后一个兄弟节点
    console.log(liObj.nextSibling);
    //后一个兄弟元素
    console.log(liObj.nextElementSibling);

    //谷歌和火狐,都是支持获取对应的节点元素,IE8:从第一个子节点开始到兄弟节点,都支持通过获取节点的 方式获取元素,获取元素的方式不支持
</script>
<script>
    //获取第一个子级元素和第一个子级节点,在IE8及以下版本中不支持
    //element.firstChild:谷歌火狐支持,获取第一个子节点,IE8及以下中获取的是第一个子元素
    //element.firstElementChild:谷歌火狐支持,获取第一个子元素,IE8及以下不支持
    //获取任意父级元素的第一个子级元素
    function getfirstElementChild(element) {
       if (typeof element.firstElementChild=="undefined"){
           return element.firstChild;
       }  else{
           return element.firstElementChild;
       }
    }
    var ulObj=my$("uu");
    console.log(getfirstElementChild(ulObj));;
    console.log(ulObj.firstElementChild);//IE8:undefined
</script>

</body>
</html>

设置文本封装

innerText只设置文本内容
innerHTML设置文本内容,根据标签名设置对应的文本内容

function setInnerText(element,value) {
    if (typeof element.textContent=="undefined"){
        element.innerText=value;
    }
    else{
        element.textContent=value;
    }