如何获取window对象的id值_55天 bom中的常用对象。-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39670441/article/details/111377729

第71次(JavaScript)

学习主题：JavaScript

学习目标：

1 掌握bom中的常用对象

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

对应作业

BOM和DOM入门
1. 请说出DOM对象和BOM对象的关系

BoM包含DOM。

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

History navigator document location screen

蓝色框内是归DOM管的，红色框内归BOM管的；也可以说DOM 也是归BOM管的

BOM对象-window
1. 常见的弹框方式有几种，请分别说出他们的使用场景

window.alert("这是一个框的")

window.confirm("这是两个按钮的")

window.prompt("请输入内容：","例如：李白") 带有输入框的弹窗。

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

setTimeout("f4()",1000) 执行一次 f4()函数在1S后

setInterval("f4()",1000); 执行多次 f4()函数间隔1S。

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

window.open("http://www.baidu.com"); 打开一个网页

window.close(); 关闭当前网页。

BOM对象-location-history-navigator
1. 请列举location对象中常用的方法

var href = window.location.href ;

var host = location.hostname ;

var port = location.port ;

var url =location.URL;

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

0: 刷新当前网页

2：前进两个网页

-2：退后两个网页。

请如何获得屏幕的分辨率

var wid = screen.width

var len = screen.height

alert("宽度为："+wid+"长度为："+len)

DOM结构节点类型
1. 请简述DOM节点的分类有哪些

元素节点 element node

属性节点 attribute node

文本节点 text node

节点之间的关系有哪些

父子关系（parent-child）：<html> 元素作为父级，

<head> 和 <body> 元素作为子级

兄弟关系（Sibling）:<a> 和 <h1> 元素就是兄弟关系;<title> 和 <h1> 元素并不是兄弟关系

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

1.查询元素（进行操作元素、或者元素的属性、文本）

2.操作文本

3.操作属性

4.操作CSS样式（一个特殊的属性style）

5.操作元素

DOM编程获得元素的方式
1. 如何获得id 名称为 inw2的所有元素对象

Document.getElementsById =”inw2”

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

Var node = Document.getElementsById =”inw2”

Node.nextSibling；

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

首先获取父节点

Var node = Document.getElementsById =”inw2”

获取子节点

Node.childNodes

第72次（JavaScript）

学习主题：JavaScript

学习目标：

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

2 掌握js操作dom的结构

3 掌握js操作表单节点

对应作业

DOM编程-操作元素属性
1. 获得元素属性的方式有几种，请说明

两种。

直接获取 var inp1 = document.getElementById("t1");

var ty= inp1.type;

间接获取 var inp1 = document.getElementById("t1");

var ar = inp1.getAttribute("value");

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

两种。

inp1.value =哈哈哈; 将value的值修改为哈哈

var ar = inp1.getAttribute("value");

inp1.setAttribute("value","hahahah") 将value的值修改为 hahah

DOM编程-操作元素样式
1. 通过js给一个对象增加css样式的方式有几种。

node.className = "div";

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

1处定义类

2处调用定义的类，调用时去掉符号。

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

只能获取行内标签的style样式的属性。

DOM编程-操作元素文本和值
1. 请说出 innerHTML和innerText的区别

innerHTML 获得的是标签中的所有内容，包括空白和其他子标签
innerText 获取的是标签中的文本内容
innerHTML 会识别HTML标签，但是innerText 不会识别HTML标签。
1. 请说出select、textarea 这两个标签如何取值。

只能获取它们的value 属性，不可以使用 innerHTML 和innerText获取。

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

需要设计到 HTML标签是用innerHTML，否则innerText也是不错的选择

DOM编程-操作元素
1. 使用appendChild()方法的时候是追加到指定元素的什么位置?

当前标签的最后的位置。

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

使用 arg1元素，替换arg2元素。

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

remove（）删除当前节点，以及子节点

removeChild（）删除子节点。

DOM编程实例1
1. 请完成对课程中对节点元素的操作案例

DOM编程实例2
1. 请完成对课程中背景图片更换的操作案例

表单元素操作
1. readonly和disabled的区别是什么？

相同点：可以看到数据，但是无法修改数据

不同点：readonly（只读）：可以将数据提交到后台

Disabled（不可用）：数据不会提交到后台

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

document.getElementById("f1").submit();