DOM 基础知识及一些小题

最新推荐文章于 2022-05-10 19:29:11 发布

mi_cy

最新推荐文章于 2022-05-10 19:29:11 发布

阅读量386

点赞数

文章标签： JavaScript DOM基础

本文链接：https://blog.csdn.net/Tom__cy/article/details/83062346

版权

document ：整个文档
HTML : 文档里面的根标签
getElementById() :元素id在ie8以下的浏览器，不区分大小写，而且没有id时，name等同于id
getElementTagname() : 生成的是数组，不能用push！
getElementByname()： name数据名，理论上只有部分标签才可以生效（form，input，img，iframe）
getElementClassname() : IE8以下没有

CSS选择器：

query Selector() ; 一个
query selectorAll() ; 一组
在ie7和ie7以下的版本没有，都是document打点调用，静态的，非实时的

节点属性：

nodetype : 该属性标签节点的类型
nodename: 该属性标签节点的名称
nodeValue：该属性标记节点的值
attributes ：Element 节点属性的集合
ele.setAttributes --设置行间属性 p（“class”，demo）P的class为demo
ele.getAttributes–获取行间属性p(“id”,demo) P的id为demo
node.haschildNodes–节点的一个方法，获取子节点

节点类型

元素节点—1
属性节点—2
文本节点–3
注释节点—8
文档节点/document----9
documentFragment----11

节点树

parentNode :父节点（所有的）
childNodes:子节点（所有的）
firstchild：第一个子节点
lastchild：最后一个子节点
nextSibling：后一个兄弟
previousSibling:前一个兄弟

parentNode==parentElement(IE不兼容)

增：

document.createElement();元素节点
document.createTextNode();文本节点
document.createcomment();
document.createDocumentFragment();

插：

parentNode appendChild();
parentNode insertBefore();

删：

parent.removeChild();
Child.remove(); 自杀

替换：

parent.replace（newchild,oldchild);
举例1：

<body>
    <p>题目二：自己封装hasChildren()方法，不可用children属性</p>

举例2：

     <!-- <P> 题目三：找第n个兄弟节点
        封装函数，返回元素e的第n个兄弟节点，
        n为正，返回后面的兄弟节点，
        n为负，返回前面的，
        n为0，返回自己</P>
        <P>兼容性写法和正常</P> -->
        
 比如：
<div>
    <i></i>
    <p></p>
    <b></b>
    <strong></strong>
    <div></div>
</div>

举例1答案：
<script>
        function son(e) {

            var child = e.childNodes;
            var len = child.length;
            for (var i = 0; i < len; i++) {
                if (child.nodeType == 1) {
                    return true;
                } else {
                    return false;
                }
            }
        }

    </script>

举例3：

 <!-- <p>封装函数，返回元素e的第n层祖先元素节点</p> -->
 
 比如：
    <div><strong><span><b><i></i></b></span></strong></div>
    举例2：
 function back(e,n){
    while(e&&n){
        if(n>0){
                if(e.nextElementSibling){
                    e=e.nextElementSibling;
                }
                else{
                 for(e=nextSibling;e && e.nodeType !=1;e=e.nextSibling);
                    }
                n--;
            } else if(n<0){

                if(e.previousElementSibling){
                   e=e.previousElementSibling
                }
                else {
                    for(e=previousSibling; e&&e.nodeType !=1;e=e.previousSibling);
                }
                n++;
            }  
        }
     
        return e;
}
var b=document.getElementsByTagName("b")[0];
back(b,-1);
</script>

举例4：


<!-- <body>
    <p>
        封装mychildren功能，解决以前部分浏览器兼容问题
    </p> -->
    <div><i></i> <strong><span><b><i></i></b></span></strong></div>


举例3：
 <script>
            //  此时n是循环次数，2就是循环2次，3就是三次
         var i=document.getElementsByTagName('i')[0];
            function retparent(e,n){
           while(e&&n){
               e=e.parentElement;
               n--;             
                }
            return e;
            }
         console.log(retparent(i,10));
    </script>

举例4答案：

<script>
       var div=document.getElementsByTagName("div")[0];
        
        Element.prototype.myChildren=function(){

            var child=this.childNodes;
            var len=child.length;
            var arr=[];
            
            for(var i=0;i<len;i++){
                if(child[i].nodeType===1){
                    arr.push(child[i]);
                }           
             }
            return arr;
        }  
       console.log(div.myChildren());
    </script>