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

VaJoy · 2016-01-09T17:58:38Z

#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>

The text was updated successfully, but these errors were encountered:

VaJoy · 2016-01-09T18:01:00Z

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

horsefefe · 2016-01-13T11:58:40Z

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 · 2016-01-19T09:41:10Z

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 · 2016-11-16T10:14:54Z

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'));

VaJoy added 难度★★ js labels Jan 9, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

VaJoy commented Jan 9, 2016

VaJoy commented Jan 9, 2016

horsefefe commented Jan 13, 2016

xiaotian0607 commented Jan 19, 2016

Yoomin233 commented Nov 16, 2016

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

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

Comments

VaJoy commented Jan 9, 2016

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

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

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

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

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

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

VaJoy commented Jan 9, 2016

horsefefe commented Jan 13, 2016

1.

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

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

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

5.

6.

xiaotian0607 commented Jan 19, 2016

Yoomin233 commented Nov 16, 2016

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