码迷，mamicode.com
首页 > 其他好文 > 详细

BOM DOM

时间：2020-03-14 00:56:44      阅读：54      评论：0      收藏：0      [点我收藏+]

标签：log   head   添加节点   tmp   navigator   查找   div   一个   cimage   

1 BOM：通过js控制浏览器

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

2 window子对象

代码块
获取浏览器全称：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 添加节点

技术图片

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

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

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

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

3-4 删除节点

技术图片

4 属性attribute

技术图片

4-1 属性的操作

代码块
HTML代码如下：

<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div标签</div>
<p>我是后面的P</p>

</div>


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代码：
<div id='d2'>
<p>我是前面的P</p>
<div id='d3' ec14='siyu'>我是子div标签</div>
<p>我是后面的P</p>
<span class='c1' dept='it center'>我是王思雨</span>
</div>


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:

<img id='c1' src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2894487835,3534766040&fm=58&bpow=480&bpoh=640" alt="" /> 

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代码部分：
<body>
<input type="text" id='i1'>
<input type="password" id='i2'>

<select id='s1'>
<option value='杭州'>杭州</option>
<option value='上海'>上海</option>
</select>
<textarea id='t1' cols="60" rows="60">请输入内容：</textarea>
</body>

JS代码部分：

res1=document.getElementById('i1');

<input type=?"text" id=?"i1">?

res1.value;
"王思雨"

"王思雨"

res2=document.getElementById('i2');

res2.value;


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

<select id=?"s1">?…?</select>?
res3.value;
"杭州"
res4=document.getElementById('t1');
res4.value;
"请输入内容：真正的猛男"

5样式操作

技术图片

代码块
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
</body>
</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的操作

技术图片

代码块
d1ele;
<div id=?"d1" class=?"c1 c2">?</div>?

d1ele.style.backgroundColor='blue';
"blue"
d1ele.style.borderRadius='20px';
"20px"

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

技术图片

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' onclick="change()">点击我切换颜色</button>
<script>
function change(){
    var d1ele=document.getElementById('d1');
    d1ele.classList.toggle('c2');
    }
</script>
</body>
</html>

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

技术图片

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    .c1{
        height:100px;
        width:100px;
        background-color:#F00;
        border-radius:50%;
        }
        
    .c2{
        background-color:#9F0;}

</style>
</head>

<body>
<div id='d1' class="c1 c2"></div>
<button id='b1' >点击</button>

<script>
    var b1ele=document.getElementById('d1');
    b1.onclick=function(){
        var d1ele=document.getElementById('d1');
        d1ele.classList.toggle('c2');
            
    }
</script>

</body>
</html>

9 js常用事件

技术图片

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

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

</head>

<body>
<input type='text' value="请输入姓名：" id="i1">
<script>
    resele=document.getElementById('i1');
    //获得焦点：
    resele.onfocus=function(){
        this.value='';
        
        }
    
    resele.onblur=function(){
        this.value='请输入姓名：';
        
        }

</script>


</body>
</html>

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

技术图片

代码块
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习曲</title>

</head>

<body>
<label for="s1">省份：</label>
<select id='s1'>
    <option>请选择省份</option>
</select>


<label for="c1">城市：</label>
<select id="c1">
    <option>请选择城市</option>
</select>

<script>
    var data = {
        "北京": ["昌平区", "海淀区", "朝阳区"],
        "上海": ["浦东区", "徐汇区", "浦东新区"],
        "山东": ["烟台", "青岛", "威海"]
    };
    // 1. 拿到所有的省，在s1中生成对应的option选项
    var s1ele=document.getElementById('s1');
    var c1ele=document.getElementById('c1');
    
    for (var i in data){
        console.log(i);
        
    // 2. 创建option标签,将i赋值给option,将option添加到父元素里面就OK
    var tmp =document.createElement('option');
    tmp.innerText=i;
    s1ele.appendChild(tmp);
    }
    
    // 3.当用户选中某个省之后才做的事儿
    s1ele.onchange=function(){
        //清空之前选择省份添加的城市项
        c1ele.innerHTML='';
        //获取用户选择的省份
        var p=this.value;
        // 根据用户选择的省，去data中找省对应的城市数据
        var c=data[p];
        //将对应城市数据添加到option中
        for (var m in c){
            console.log(m);
            var tmp1=document.createElement('option');
            tmp1.innerText=c[m];
            c1ele.appendChild(tmp1);
            }
        
        }
    
</script>


</body>
</html>

BOM DOM

标签：log   head   添加节点   tmp   navigator   查找   div   一个   cimage   

原文地址：https://www.cnblogs.com/hellosiyu/p/12489958.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！