js基础之BOM和DOM

BOM

window对象：全局浏览器对象。

查看浏览器窗口的内部高度

window.innerHeight

查看浏览器窗口的内部宽度

window.innerWidth

打开新窗口

window.open();

关闭当前窗口

window.close();

window的子对象

　　1、navigater对象，浏览器对象，包含了浏览器相关信息。

　　　　web浏览器全称:

navigator.appName

　　　　web浏览器厂商和版本的详细字符串:

navigator.appVersion

　　　　客户端绝大部分信息:

navigator.userAgent

　　　　浏览器运行所在的操作系统:

navigator.platform

　　2、screen对象

　　　　可用的屏幕宽度

screen.availWidth

　　　　可用的屏幕高度

screen.availHeight

　　3、history对象

　　　　前进一个页面

history.forward();

　　　　后退一个页面

history.back();

　　4、location对象

　　　　获取当前网址的url

location.href;

　　　　跳转到指定页面

location.href='www.baidu.com';

　　    刷新当前页面

location.reload();

弹出窗

　　可以在JavaScript中创建三种信息框：警告框、确认框、警示框。

　　警告框：

alert('欢迎你来到小米商城购物');

　　确认框:

confirm('你确定吗？');

　　提示框：

prompt('请在下方输入','你的答案');

计时器相关(异步的)

 　　setTimeout()  一段时间后做一些事情。

　　　　语法：var t = seTimeout('js语句',毫秒);    第一个参数js语句多数写一个函数，不然一般的is语句到这里就直接执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器自动分配的。）。

var t = setTimeout(function(){
alert('欢迎你来购物');
},4000);

　　　　清除计时器：

clearTimeout(t);

　　setInterval()　　每隔一段时间做某件事情：

var t = setInterval(function(){
alert('欢迎你来购物');
},4000);

　　清除计时器：

clearInterval(t);

DOM

HTML DOM树

DOM标准规定HTML文档中的每一个成分都是一个节点（node）：

  • 文档节点（document对象）：代表整个文档
  • 元素节点（element对象）：代表每一个元素（标签）
  • 文本节点（text对象）：代表元素（标签中的文本）
  • 属性节点（attribute对象）：代表一个属性，元素（标签）才有属性
  • 注释是注释节点（comment对象）
  • JavaScript 可以通过DOM创建动态的HTML
  • JavaScript 能够改变页面中的所有HTML元素
  • JavaScript 能够改变页面中的所有HTML属性
  • JavaScript 能够改变页面中的所有css样式
  • JavaScript 能够对页面中的所有事件作出反应(鼠标点击事件，鼠标移动事件等...)

查找标签（和css一样，你想要操作某个标签就需要先找到它）

　　直接查找：

　　　　根据id：获取一个标签。

var a = document.getElementById('d1');

　　　　根据类值：可以获取多个元素，所以返回的是一个数组。

var b = document.getElementsByClassName('c1');

　　　　根据标签名：获取标签合集。

var c = document.getElementsByTagName('div');
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="c1" id="d1">
    一首诗
</div>
<div class="c1" id="d2">
    两首诗
</div>
<div class="c1" id="d3">

</div>

</body>
</html>
View Code

　　间接查找：通过直接查找找到标签后，可以通过该标签间接的查找这个标签相关的父标签子标签兄弟标签。

　　　　找父节点标签元素：

var a = document.getElementsByClassName('title');

　　　　所有子标签：

a[0].children;

　　　　第一个子标签：

a[0].firstElementChild;

　　　　最后一个子标签：

a[0].lastElementChild;

　　　　下一个兄弟标签：

a[0].nextElementSibling;

　　　　上一个兄弟标签：

a[0].previousElementSibling;

节点操作：

　　创建一个新节点，并将这个新节点添加到某个节点中去：　

var a = document.createElement('a');    // 创建一个a标签
a.innerText('baidu');                            //为a标签添加文本内容


var dd = document.getElementById('d1');   //通过id值来找到添加的标签

dd.appendChild(a);                            //将新创建的a标签添加到上面找到的标签的最后

　　在某个节点前面添加节点：

var a = document.createElement('p');
p.innerText('一定要学好Django');


var d1 = document.getElementById('d1');
var d2 = d1.children[1];

d1.insertBefore(p,d2);     // 父级标签.insertBefore(新创建的标签,某个儿子标签)




　　删除节点：父级标签中删除子标签




var d1 = document.getElementById('d1');
var d2 = d1.children[1];
d1.removeChild(d2);




　　替换节点：




var p = document.createElement('p');       //创建一个新的p标签
p.innerText('一定要学好Django');               //为标签添加文本内容


var d1 = document.getElementById('d1');   //找到父级标签


var d2 = d1.children[1];      //   找到父级标签的某个要被替换的儿子标签
  
d1.replaceChild(p,d2);   //   用新的p标签替换到原先的子标签






文本操作：


　　innerText：只是别字符串。


　　innerHTML：能够识别标签。




var nav =document.getElementById('nav');    找到标签
nav.innerText    查看这个标签所有的标签和内部所有标签的文本内容
nav.innerHTML
nav.innerText = '<a href="">百度</a>';     替换
nav.innerHTML = '<a href="">百度</a>';     替换文本，能识别标签





属性操作：


　　attribute操作：




var nav =document.getElementById('nav');   //获取标签

nav.setAttribute('class','div1');   //为这个标签设置class属性，值为div1 
 
nav.getAttribute('class');    　　// 查看这个标签的class属性的值
nav.removeAttribute('class');　　　//移除这个标签的class属性




自带的属性还可以直接 标签对象.属性名来获取和设置，如果是自定义的属性，则不能这么操作，比如a标签的href属性，img标签的src属性...



　　值操作：用户输入的值，选择的一些内容，会产生一些数据的值。这些值也是可以操作的。






<label for="username">用户名</label>
<input type="text" id="username">



input标签




var inp = document.getElementById('username');     //获取input标签
inp.value　　　　　　　　　　//获取输入的值
inp.value='zrg';　　　　　　//设置值








    <select name="city" id="city">
        <option value="1">苏州</option>
        <option value="2">淮安</option>
        <option value="3">南通</option>
    </select>



选择框




    var sel = document.getElementById('city');
    sel.value       //查看值
    sel.value = '2'   //设置值





class操作：class本身也是属性。





var div2 = document.getElementById('div2');   //  获取标签
div2.classList;　　　　　　　　　　　　　　　　　　//  查看当前标签的class属性的所有的值
div2.classList.add('dd2');　　　　　　　　　　　　//为当前标签添加class值
div2.classList　　　　　　　　　　　　　　　　　　　//
div2.classList.remove('dd2');　　　　　　　　//以括号里的值来删除
div2.classList.contains('dd2');　　　　　　　//判断是否有这个class值
div2.classList.toggle('dd2');　　　　　　　　//有就删除，没有就添加





css操作：有横杠的css属性，写法要去掉横杠，并且横杠后面的单词首字母要大写。




var div2 = document.getElementById('div2');
div2.style.backgroundColor = 'red';
div2.style.height = '400px';





事件


什么是事件？


　　用户产生某些操作，被我们事件捕获到了，触发我们事件指定的一些操作。


常用事件有哪些？：点击onclick


如何绑定事件?


1、把时间当属性写在标签里面




<body>
<div id="d1" class="c1" onclick="f1();"></div>  　　　　//绑定事件

<script>
    function f1() {
        var d1 = document.getElementById('d1');
        d1.style.backgroundColor = 'yellow';
    }
</script>
</body>




2、通过js代码找到标签。这种方法用的多。




<div id="d1" class="c1"></div>

<script>
    var d1 = document.getElementById('d1');
    d1.onclick = function () {                //绑定事件
        d1.style.backgroundColor = 'pink';
    }
</script>





事件里面this


绑定方式一：


如果想操作的动态变化的是你自己当前绑定事件的这个标签，可以简写，这个this就是当前绑定的这个标签。




<div id="d1" class="c1" onclick="f1(this);"></div>  　　　　

<script>
    function f1(ths) {
        ths.style.backgroundColor = 'yellow';
    }
</script>




操作自己让别的标签发生变化：




<div id="d1" class="c1" onclick="f1(this);"></div>  　　　　
<div id="d2" class="c2"></div>  　　　　

<script>
    function f1(ths) {
        var d2 = document.getElementById('d2');
        d2.style.backgroundColor = 'yellow';
    }
</script>




绑定方式二：this表示当前绑定事件。




<div id="d1" class="c1"></div>  　　　　
　　
<script>
    function f1() {
        this.style.backgroundColor = 'yellow';
    }
</script>





onfocus事件：获得光标




<label for="username">用户名：</label>
<input type="text" id="username">
<div id="d1" class="c1"></div>

<script>
    var inp = document.getElementById('username');
    inp.onfocus = function () {
        var d1 = document.getElementById('d1');
        d1.style.backgroundColor = 'pink';
    }
</script>




onblur失去光标时触发的事件：




<label for="username">用户名：</label>
<input type="text" id="username">
<div id="d1" class="c1"></div>

<script>

    var inp = document.getElementById('username');
    inp.onfocus = function () {
        var d1 = document.getElementById('d1');
        d1.style.backgroundColor = 'yellow';

    };
    inp.onblur = function () {
        var d1 = document.getElementById('d1');
        d1.style.backgroundColor = 'green';
    };
</script>　　　　





onchange事件：域的内容改变。一般用在select标签里




<select name="" id="programming language">
    <option value="1">c++</option>
    <option value="2">python</option>
    <option value="3">java</option>
    <option value="4">php</option>
</select>

<script>
    var selt = document.getElementById("programming language");
    selt.onchange = function () {
        // console.log(this.options)     //select标签的所有option标签
        // console.log(this.options[this.selectedIndex]);  //被选中标签在所有标签中的索引值
        console.log(this.options[this.selectedIndex].innerText + '年薪30万。'); 

    };

</script>　





onchang事件在input里的应用：




<label for="username">用户名：</label>
<input type="text" id="username">
<div id="d1" class="c1"></div>
<script>
    var inp = document.getElementById('username');
    inp.onchange = function () {
        console.log(this.value)
    }
</script>　




常用的事件：








        

	      

	    

	  

	  

	    
      
        【推广】
        免费学中医，健康全家人
      
	  

    

    

          原文地址：https://www.cnblogs.com/zhangrenguo/p/10177100.html