javascript div 没id_JavaScript学习

训练大纲(第036天)

大家如果想快速有效的学习，思想核心是“以建立知识体系为核心”，具体方法是“守破离”。确保老师课堂上做的操作，反复练习直到熟练。

第71次(JavaScript)

学习主题：JavaScript

学习目标：

1 掌握bom中的常用对象

2 掌握dom如何获取节点,以及dom节点的类型

对应视频:

http://www.itbaizhan.cn/course/id/85.html

对应文档:

无

对应作业

1. BOM和DOM入门

(1) 请说出DOM对象和BOM对象的关系

BOM对象包含DOM对象

(2) 请说出BOM对象中包含的对象内容

History

Navigator

Document

Location

Screen

2. BOM对象-window

(1) 常见的弹框方式有几种，请分别说出他们的使用场景

三种弹框的方式：

//只含有确定的按钮window.alert("今天星期一， 马上周五了， 我好开心呢");

//含有确定按钮和取消按钮的弹框var flag= window.confirm("确实很开心");

//如果返回的是true代表点击的是确定 ， 如果返回是false代表点击的取消

//含有输入内容的弹框 前部分代表的是提示的信息， 后面是输入内容的默认值var val= window.prompt("请输入昵称：","例如：李白");//取消 返回 null

(2) 请说出setTimeout和setInterval的区别和联系，并且说出他们的使用场景

setTimeout

调用方法 执行一次

setInterval

执行方法 执行了多次

(3) 请说出open方法的作用和使用场景。

关闭和打开浏览器

//打开指定的页面window.open("http://www.baidu.com");

//关闭浏览器窗口。window.close();

3. BOM对象-location-history-navigator

(1) 请列举location对象中常用的方法

Location：对象

var href= window.location.href;

//获得端口号 8020var port=window.location.port;

//主机名称var hostname=window.location.hostname;

//主机加端口号var host=window.location.host;

//修改当前的URL地址window.location.href="http:

//http://www.taobao.com";

//刷新网页window.location.reload();

(2) 请说出window.history.go(args); 请说出args值分取 0 , 2 , -2 的含义

//如果是正数标识前进指定的页面 如果是负数标识后退指定的页面window.history.go(-1);

(3) 请如何获得屏幕的分辨率

//获得当前屏幕的分辨率

var he = window.screen.height;

var wi = window.screen.width;

4. DOM结构节点类型

(1) 请简述DOM节点的分类有哪些

(2) 节点之间的关系有哪些

Head、body兄弟关系

Head.title父子关系

(3) 请简述我们都可以操作DOM对象的哪些内容

属性宽高颜色大小、文本值

5. DOM编程获得元素的方式

(1) 如何获得id 名称为 inw2的所有元素对象

Var id=document,getEelentById(“inv2”)

(2) 如何获得当前节点对象的下一个节点对象，不包含空白节点元素

Var next=inp.nextSibling.nextSibling;

(3) 请写出常使用的间接获得对象的方式

//获得div下的所有的子节点 空白的文本也是一个节点var child= div.childNodes;

//获得当前节点的父级节点---直系父节点var parent= inp.parentNode;

//获得当前节点的上一个节点

分享/讲解/扩展思考

点名提问从第一节课到最后一节课分别学到了什么，直到同学们把所有的知识点都说出来并且保证无误。

第72次（JavaScript）

学习主题：JavaScript

学习目标：

1 掌握js操作dom节点的属性,样式,文本值

2 掌握js操作dom的结构

3 掌握js操作表单节点

对应视频:

http://www.itbaizhan.cn/course/id/85.html

对应文档:

无

对应作业

6. DOM编程-操作元素属性

(1) 获得元素属性的方式有几种，请说明

//获得id名称是inp1对象节点var inp1=document.getElementById("inp1");

//方式一： 获得元素的属性var ty=inp1.type;var va=inp1.value;var na=inp1.name;

//方式二： 获得元素的属性var ty1=inp1.getAttribute("type");

(2) 操作元素属性的方式有几种，请简要说明

//一、的属性inp1.type="button";inp1.value="测试改变";

//方式二： 操作元素的属性inp1.setAttribute("type","button");

7. DOM编程-操作元素样式

(1) 通过js给一个对象增加css样式的方式有几种。

两种

/*========更改css的样式，只支持行内样式==========*/

var div=document.getElementById("div1");

div.style.width="300px";

div.style.height="300px";

div.style.backgroundColor="red";

/*========通过更改class类来增加对应的的样式， className==========*/

div.className="div2";

(2) className 该方式使用的场景是什么？

/*========通过更改class类来增加对应的的样式， className==========*/

div.className="div2";

<style>

.div2{

border: 2px solid green;

}

</style>

(3) 使用js的方式在获得元素css样式的时候有什么缺点?

8. DOM编程-操作元素文本和值

请说出 innerHTML和innerText的区别

//会获得里面的HTML中的内容var inn=div.innerHTML;//只会获得文本的信息var inn2=div.innerText;

(1) 请说出select、textarea 这两个标签如何取值。

var sel=document.getElementById("sele");

alert(sel.value);var te=document.getElementById("tex");

te.value

(2) innerHTML和innerText 在取值的时候的使用场景是什么?

var div=document.getElementById("div1");

var inn=div.innerHTML; //包括html内容

var inn2=div.innerText; //只包含文本

console.log(inn);

console.log(inn2);

9. DOM编程-操作元素

(1) 使用appendChild()方法的时候是追加到指定元素的什么位置?

p.appendChild(inp); //将inp添加到p标p.appendChild(inp2); //将imp2添加到p标签中

(2) 请问replaceChild(arg1,arg2)在使用的时候参数的含义是什么?

替换节点的方法

· parentNode.replaceChild(newNode, oldNode)

(3) 请问如何删除一个节点对象

var tr=thi.parentNode.parentNode;//获取 text<<td<<tr 结点

tr.remove();//移除tr结点

10. DOM编程实例1

(1) 请完成对课程中对节点元素的操作案例

11. DOM编程实例2

(1) 请完成对课程中背景图片更换的操作案例

12. 表单元素操作

(1) readonly和disabled的区别是什么？

readonly:只读，不可以操作数据，但是数据可以提交到后台中

disabled：不可用，不可操作，不可以提交

(2) 使用JS提交表单的方式有几种，请说明使用的场景。

两种：

1.自动提交

submit类型 οnsubmit="return checkName()

2.手动提交

buttun类型 document.fom.sumit();

var fom=document.getElementById("fom");

fom.sunmit();

<form action="#" οnsubmit="return checkName()">

分享/讲解/扩展思考

点名提问从第一节课到最后一节课分别学到了什么，直到同学们把所有的知识点都说出来并且保证无误。