Skip to content

高三精读小组课后作业(04期) #16

@VaJoy

Description

@VaJoy

#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.htmlhttp://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.anchorsdocument.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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions