search

N-ZOO / everycode

前端每日一练
163 stars 18 forks source link

高三精读小组课后作业（04期） #16

Open VaJoy opened 8 years ago

VaJoy commented 8 years ago

247-285页（第十章）

答案将于一周后更新于本贴，大家可以跟帖写答案看自己对基础知识的掌握程度如何。 跟帖回答案的都应自行思考完成，不然没有任何意义

1.写一个函数，遍历某个节点，返回该节点所拥有的所有后代节点（element类型）的数量：

<body>
<div>
    <ul>
        <li>Hi</li>
        <li>vajoy</li>
    </ul>
</div>
<div>yoyoyo</div>

<script>
    function countElm(root) {
        //TODO：完成它
    }

    console.log(countElm(document.body));  //6，即2个div、1个ul、2个li、1个script
</script>
</body>

2.主域相同、子域不同的跨域通信模拟

模拟2个主域相同子域不同的页面，比如 http://www.abc.com:8080/sop/a.html 和 http://abc.com:8080/sop/b.html，在 a.html 页面插入 b.html 页面（iframe），并在 a.html 页面中将 b.html 上的 div 内容修改为“OK”。 P.S. 你可以通过修改host来模拟跨域：

127.0.0.1     abc.com
127.0.0.1     www.abc.com

a.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>a.html</title>
</head>
<body>
<iframe src="http://www.abc.com:8080/sop/b.html"></iframe>
<script>
    //TODO: 将b.html里的div的内容改为“OK”
</script>
</body>
</html>

b.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>b.html</title>
</head>
<body>
<div>nothing</div>
</body>
</html>

3.document.anchors 和 document.links 的区别是什么？

4.说说下方html对应的页面最终会显示什么内容：

<body>
<div>yoyoyo</div>

<script>
    window.onload = function(){
        document.open("text/html","");
        document.writeln('<div>1</div>');
        document.close();
        document.writeln('<div>2</div>');
        document.writeln('<div>3</div>');
        document.close();
    }
</script>
</body>

5.编写一个方法，用来打印一个节点的所有指定的特性，要求兼容旧IE

<div id="d" data-a="1" name="divname"></div>

<script>
    function printAttributes(elm){
        //TODO：完成该函数
    }
    printAttributes(document.getElementById('d'));
    //    id:d
    //    data-a:1
    //    name:divname
</script>

6.说说下方代码存在什么问题，以及如何解决（试着说出2种解决方案）

<ul>
    <li>1</li>
    <li>2</li>
</ul>

<script>
    var ul = document.getElementsByTagName('ul')[0],
        li = document.getElementsByTagName('li');
    for(var i=0; i<li.length; i++){
        var new_li = document.createElement('li');
        ul.appendChild(new_li)
    }
</script>
VaJoy commented 8 years ago

草，第一题答案忘了擦除就发了，大家别看邮件:sweat:

horsefefe commented 8 years ago

1.

 function countElm (root) {
            var count=0;
            var len=root.childNodes.length;
            if(len==0){
                return 0;
            }else{
                for(var i=0;i<len;i++){
                    var _node=root.childNodes[i];
                    if(_node.nodeType==1){
                        count++;
                    }
                    count+=countElm(_node);
                }
                return count;
            }
        }

2. 想到使用 document.domain ，希望看到好的答案，整理过就最好了

3. document.anchors 带name属性的标签，document.link 带href属性的a 标签

4.显示2和3，文档流被覆盖

5.

function printAttributes(elm){
        var pairs=[],attrName,attrValue,i,len;
        for(i=0,len=elm.attributes.length;i<len;i++){
            attrName=elm.attributes[i].nodeName;
            attrValue=elm.attributes[i].nodeValue;
            //specified 表示html元素中是否真正指定了值
            if(elm.attributes[i].specified){
                pairs.push(attrName+"=\""+attrValue+"\"\n");
            }
        }
        return pairs.join('');
    }

6.

li = document.getElementsByTagName('li'); li的length会实时变动，len应该先赋值 应该采用documentfragement进行append，优化性能

xiaotian0607 commented 8 years ago

1. function countElm(root) { //TODO：完成它 var count=0; var len=root.childNodes.length;
for(var i=0;i<len;i++){ if(root.childNodes[i].nodeType==1){ count++; count+=countElm(root.childNodes[i]); }
} return count;
} console.log(countElm(document.body)); //6，即2个div、1个ul、2个li、1个script

3.document.anchors,包含文档中带有name特性的元素, document.links,包含文档中带有href特性的元素 4.显示2和3 6. var ul = document.getElementsByTagName('ul')[0], li = document.getElementsByTagName('li'), len = li.length; for(var i=0; i<len; i++){ var new_li = document.createElement('li'); ul.appendChild(new_li) }

Yoomin233 commented 7 years ago 
function walkNode(elem){
    var len = elem.children.length, count = 0
    if(len){
        count += len;
        [].forEach.call(elem.children, (elem) => {
            console.log(elem.tagName);
            count += walkNode(elem);
        })
    }
    return count;
}
walkNode(document.getElementById('element'));