【第68天】BOM DOM

1 BOM:通过js控制浏览器

代码块
弹出框:alert('hello,world')
打开一个新的窗口:window.open()

2 window子对象

2-1 navigator导航对象

代码块
获取浏览器全称:navigator.appName;
获取版本:navigator.appVersion;
获取客户端绝大多数信息:navigator.userAgent;
获取浏览器操作系统:navigator.platform;

2-2 location对象

代码块
获取当前页面的网址:location.href
跳转到指定的网址:location.href='http://www.sofo.com'
重新加载当前页面:location.reload()

2-3 弹出框

代码块
警告框:alert('are you sure ?')
确认框:confirm('你确定吗')
提示框:prompt('请输入提示内容','西红柿')

2-4 计时

代码块:多长时间后执行
setTimeout(function(){alert('hello')},4000);

3秒后执行launch函数
function launch(){
    alert('hello');
}

setTimeout(launch,3000)

代码块:每隔一段时间做
定义一个函数
function auto(){
    console.log('hello,world')
}

每隔一段时间,3秒执行打印
var res = setInterval(auto,3000)


清除打印,结束打印:clearInterval(res);

清空定时器

3 通过JS操作DOM

3-1 查找标签

查找标签
代码块
通过ID获取标签:document.getElementById('d1')

根据类名class去找:document.getElementsByClassName('c1')

根据标签的名字去找:document.getElementsByTageName('p')

3-2间接查找

间接查找

找标签

3-3 添加节点

image.png
代码块:创建一个标签,放到子节点最后
第一步:找到父节点
var father =document.getElementById('d2');

第二:生成子节点
var last_son =document.createElement('div');

第三:子节点文字
last_son.innerText='helloworld';

第四:插入正确位置
father.appendChild(last_son);

3-4 删除节点

image.png

4 属性attribute

属性设置

4-1 属性的操作

代码块
HTML代码如下:

我是前面的P

我是子div标签

我是后面的P

js代码如下: var res =document.getElementById('d3'); 拿到属性值:res.getAttribute('ec14'); "siyu" 设置新的属性值:res.setAttribute('ec14','wanjun'); 查看属性值是否为新的:res.getAttribute('ec14'); "wanjun" 移除属性值:res.removeAttribute('ec14'); undefined res.getAttribute('ec14'); null

4-2通过标签名操作属性

代码块:
HTML代码:

我是前面的P

我是子div标签

我是后面的P

我是王思雨
js代码: 拿到span标签:var res = document.getElementsByTagName('span'); 是一个数组。 res[0].getAttribute('dept'); "it center" res[0].setAttribute('dept','database'); undefined res[0].getAttribute('dept'); "database" res[0].remove('dept'); undefined

4-3 通过标签名操作图片的属性

代码块

HTML:

 

JS:
res=document.getElementById('c1');

res.setAttribute('src','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569079312315&di=2851a676ef5ad078b2b9055b8249fa33&imgtype=0&src=http%3A%2F%2Fy.zdmimg.com%2F201702%2F07%2F5899a7e766f035068.jpg_e600.jpg');

4-4通过js操作表单的内容

代码块
HTML代码部分:








JS代码部分:

res1=document.getElementById('i1');

​

res1.value;
"王思雨"

"王思雨"

res2=document.getElementById('i2');

res2.value;


"qwehkkwjjkd"
res3=document.getElementById('s1');

​
res3.value;
"杭州"
res4=document.getElementById('t1');
res4.value;
"请输入内容:真正的猛男"

5样式操作

image.png
代码块
HTML代码:




无标题文档




JS代码如下: d1ele=document.getElementById('d1'); d1ele.classList.remove('c2'); 移除c2的属性 d1ele.classList.add('c2'); 添加C2的属性 d1ele.classList.contains('c2'); 查询是否包含某个属性 来回切换属性值: d1ele.classList.toggle('c2'); false d1ele.classList.toggle('c2'); true

6 指定css的操作

2.png
代码块
d1ele;
​ d1ele.style.backgroundColor='blue'; "blue" d1ele.style.borderRadius='20px'; "20px"

7 js捆绑元素之获得焦点(直接在标签内绑定事件)

image.png
代码块




无标题文档




8 通过在js代码中绑定事件控制样式

image.png
代码块




无标题文档




9 js常用事件

js常用事件

10:练习获得焦点和失去焦点输入框默认值的变化

代码块




无标题文档











11 js级联列表,选择省份,后面城市自动变化

image.png
代码块




练习曲

















你可能感兴趣的:(【第68天】BOM DOM)