DOM对象

windows对象

BOM 浏览器对象模型

location对象

location.href;//获取当前url;
location.href = 'URL' //跳转到指定页面;
location.reload(); //重新加载页面,刷新页面

计时器相关(计时器是异步的)

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

var a = setTimeout(function(){
 alert('未满18岁尽快离开')
console.log('你好')
},3000);
clearTimeout(a) //清除计数器;

setInterval() 计时器,每隔一段时间做一些事情

var a = setInterval(function(){
 alert('未满18岁尽快离开')
console.log('你好')
},3000);
clearInterval(a) //清除计数器;

DOM 文档对象模型

直接查找

 document.getElementById('d1'); 根据ID获取一个标签
 document.getElementsByClassName('c1'); 根据class属性获取(可以获取多个元素,
 所以返回的是一个数组)
 document.getElementsByTagName('div');根据标签获取标签集合
 示例:
 <div class="c1" id="d1">
      日照香炉生紫烟,遥看瀑布挂前川!
  </div>
  <div class="c1" id="d2">
      待将军归来日,朕与你解衣带!
  </div>
  <input type="button" onclick="f1()" value="变">
  <script>
      var f1 = function () {
          var a = document.getElementById('d1');
          a.innerText = '雅婷宝宝,操死你'
      }
  </script>

间接查找

var a = document.getElementById('d1');
a.parentElement; //查找父节点
a.nextElementSibling; //查找下一个兄弟节点
a.previousElementSibling;
//查找所有子节点
var a = document.getElementsByClassName('cc');
a[0].children;

创建节点

创建节点(创建标签)
示例: 末尾添加一个节点
var a = document.createElement('a'); //创建a标签
a.innerText = '百度' //往a标签中添加内容
var b = document.getElementById('dd'); //找到id ='d1'的div标签
dd.appendchild(a); 添加a标签
示例: 在某个标签之前添加一个新标签
创建a标签:
var a = document.createElement('a');
a.innerText = '美团';
找到某个节点
var dd = document.getElementById('dd');
var d1 = dd.children[1];
在这个节点前插入a标签;
dd.insertBefore(a,d1);

删除节点

//找到父节点
var dd = document.getElementById('dd');
//找到要删除的子节点
var d1 = dd.children[1];
//删除子节点
dd.removeChild(d1);
​

替换节点

//找到父节点
var dd = document.getElementById('dd');
//找到要替换的子节点
var d1 = dd.children[0];
//创建a标签
var a = document.createElement('a');
a.innerText = '美团';
//替换标签
dd.replaceChild(a,d1);
​

文本操作

d1.innerText = "<a href = ''>百度</a> ";//只能识别文本
d1.innerHTML = "<a href = ''>百度</a> ";//可以识别标签

属性

什么是属性?

属性包括: href =''; class =''; id =''; 等等 都是属性

设置属性方式一

a.setAttribute('href','htttp://www.baidu.com');//设置属性
a.getAttribute('href');//查看属性

设置属性方式二

a.href = 'http://www.baidu.com';//设置属性
a.href;//查看属性

移除属性

a.removeAttribute('href');

input

var dd = document.getElementById('dd');
var inp = dd.children[0]
inp.value //查看input输入框的值
inp.value = 'taibai'; //设置input输入框的值

select

<select name="city" id="city" multiple>
          <option value="1" >上海</option>
          <option value="2">百度</option>
          <option value="3">北京</option>
      </select>
var cit = document.getElementById('city');
cit.value; //查看属性值
"1"
cit.value = '2'; //设置属性值
"2"

class的操作

var a =document.getElementById('dd1');
a.classList; 获得这个标签的class属性的所有值
a.classList.add('xx2'); //添加class值
a.classList.remove('xx2'); //删除class值
a.classList.contains('xx2'); //检查是否含有class值
a.classList.toggle('xx2');//检查有就删除,没有就添加

css的操作

//css属性有横杠的去掉横杠,后面首字母大写;
var a =document.getElementById('dd1');
a.style.backgroundColor ='red';
a.style.height ='200px';

 

​
​
​