模块五 前端BOM与DOM

660 views

 ›
模块五 前端BOM与DOM

BOM

浏览器对象模型
1、window
alert()
confirm()
prompt()
setInterval()
setTimeout()
2、location
href
hash
url
reload()
3、screen
4、history
go

alert confirm prompt
弹出框
window.alert('msaa');
var a= window.confirm('你确定要离开网站?');
console.log(a);
var name  = window.prompt('请输入你吃了吗？','mjj');
console.log(name);

定时器方法
setTimeout()  setInterval()
延迟性操作
window.setTimeout(function(){
console.log('mjj');
},1000)
console.log('xiongda');

定时执行
var num = 0;
var timer =null;
timer = setInterval(function(){
num++;
if (num > 5){
clearInterval(timer);
return;
}
console.log('num' + num);
console.log('mjj');
},1000)
清除定时器
clearInterval()

location对象
location.host
location.hostname
location.href
location.pathname
location.port
location.protocol
location.search
  • 如何访问每个查询字符串参数 字符串 ==》 array list ==》对象dict 同Python解法，获取value 创建dict 这里叫对象object
args = {
'name':'123';
'pwd':'xxxx';
}

function getQueryString(){
// 取得取消问号查询字符串 user=mjj&pwd=123
var qs = location.search.length >0 ? location.search.substring(1) : '';
// 取得每一项 存放到数组中
var items = qs.length ? qs.split('&') : [];
var item = null, name = null, value= null, args={};
for(var i=0;i<items.lengthl;i++){
item = items[i].split('=');   // ['name%20','mjj']
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length){
args[name] = value;
}

}
return args;

}
var args = getQueryString();
console.log(args.name);
console.log(args.pwd);


n [9]: ''.join(['a','b'])
Out[9]: 'ab'
  • 位置操作
href  
2秒之后跳转小圆圈的web页面
setTimeout(function(){
location.href = "http://book.luffycity.com/python-book/934-dom.html";  # 会有历史记录可以返回之前网页
location.replace('http://book.luffycity.com/python-book/934-dom.html');  # 不会产生历史记录
location.reload();
},2000)

navigator对象
navigator.plugins
function hasPlugin(name){
//如果有插件 返回true
name = name.toLowerCase();
for(var i=0;i < navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1 ){
// 有此插件
return true;
}else{
return false;
}

}
}
aleret(hasPlugin('Flash'));

history对象
console.log(history);
var count = 0;
setTimeout(function(){
count ++;
conssole.log(count);
histot.go(-1); //刷新  -1 后退 2 前进 
},2000)

DOM

Document Object Model  文档对象模型

基本对象 name属性 fav方法
var  person = {
name:'mjj',
fav:function(){

}
}

js中对象分类三种：
1、用户定义对象
2、内建对象  array Date Math
3、宿主对象

Model  Map(地图)  

DOM 看做一颗’树‘
DOM 把文档看作一颗"家谱树"

parent child sibling

节点数 节点对象
节点中分类 
节点 node
1、元素节点 (element node)     html元素
2、文本节点 （text node）  text 
3、属性节点 (attribute node)   class  title ..  
没有内容的文档是没有任何价值的，而大多数内容都是由文本提供
<p title='我是大神' class=''></p>
  • 获取元素节点对象方式
1、var eleNode = document.getElementById('classList');   单个对象
console.log(typeof eleNode);

2、document.getElementsByTagName()  获取出来是一个节点对象集合 有点像数组 push() 报错 不是数组
var olis = document.getElementsByTagName('li');
console.log(olis[0]);
for(var i=0;i<olis.length;i++){
console.log(olis[i]);
}
console.log(typeof olis);

3、document.getElementsByClassName(’item‘);  获取出来是一个节点对象集合
var oitems = document.getElementsByClassName(’item‘);

setAttribute() getAttribute() 用法
var op = document.getElementsByTagName('p')[0];
获取属性值 有一个必须参数，这个节点对象名字
var title = op.getAttribute('title');
console.log(title);   获取不到 返回null

设置属性值 setAttribute(name.value)
op.setAttribute('id','box');

  • 注意静态显示不变，js 不会改变静态内容，只会动态去修改已设置内容，

  • 先加载文档的静态内容、再以动态方式对他们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现

节点属性

在文档对象模型(DOM)中，每一个节点都是一个对象。DOM节点有三个重要的属性：
nodeName: 节点的名称
nodeValue：节点的值
nodeType: 节点的类型

1.nodeName属性：节点的名称，是只读
元素节点的nodeName与标签名相同
属性节点的nodeName与属性的名称相同
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document

2.nodeValue属性：节点的值
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

3.nodeType 属性: 节点的类型，是只读的。

以下常用的几种结点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

<div id="box" title="我是文本">我是一个文本节点<!-- 我是注释 -- ></div>
<script type="text/javascript">
    //1.元素节点
    var oDiv = document.getElementById('box');
    console.log(oDiv.nodeName + "|" + oDiv.nodeValue + "|" + oDiv.nodeType);
     // 2.获取属性节点
    var attrNode = divNode.attributes[0];
    console.log(attrNode.nodeName + '|' + attrNode.nodeValue + "/" + attrNode.nodeType);
    // 3.获取文本节点
    var textNode = divNode.childNodes[0];
    console.log(textNode.nodeName + '|' + textNode.nodeValue + "/" + textNode.nodeType);
    // 4.获取注释节点
    var commentNode = divNode.childNodes[1];
    console.log(commentNode.nodeName + '|' + commentNode.nodeValue + "/" + commentNode.nodeType);
    // 5.文档节点
    console.log(document.nodeName + '|' + document.nodeValue + "/" + document.nodeType);


</script>
  • attributes属性是获取到该节点对象上的所有属性的集合
  • childNodes属性是获取到该节点对象的所有子节点的集合

节点对象的其他常用属性

var oFather = document.getElementById('father');
console.log(oFather.childNodes);
console.log(oFather.childNodes[0]);
console.log(oFather.fisrtChild);

oFather.childNodes[oFather.childNodes.length - 1]
oFather.lastChild  最后一个
oFather.parentNode  上级节点 
oFather.nextSibling   上一节点
oFather.previousSibling  下一节点
注意换行，默认获取包含换行

节点对象属性在各浏览器兼容性处理

console.log(oFather.childNodes);

function get_childNode(fatherNode){
var nodes = fatherNode.childNodes;
var arr = [];  # 保存已经获取的元素节点对象
for(var i=0;i<nodes.length;i++){
if(nodes[i].nodeType === 1){
arr.push(nodes[i]);
}
}
return arrr;
}
var childnodes = get_childNode(oFather)
console.log(childnodes[0]);

function get_nextSibling(n){
var x = n.nextSibling;
while(x && x.nodeType != 1){
x = x.nextSibling;
}
return x;
}
console.log(get_nextSibling(oFather));

元素节点对象的增删改查方法

属性 方法

动态操作节点
1、创建节点 createElement()
2、插入节点 appendChild()

insertBefore(newNode,node)
3、删除节点 removeChild()
4、替换节点 replaceChild(newNode,node)
5、创建文本节点createTextNode()

var oDiv = document.getElementById('box');
var newNode = document.createElement('p');
newNode.setAttribute('class','active');
oDiv.appendChild(newNode);

var textNode = document.createTextNode('alex');
newNode.appendChild(textNode);

newNode.InnerHTML = 'alex@qq.com';
newNode.InnerHTML = '<a href='#'>aaa</a>'
newNode.InnerText =  '<a href='#'>aaa</a>'   # 全部解析成文本

var newNode2 = document.createElement('p');
第一个参数是新插入的节点，第二个参数是参考节点
oDIV.insertBefore(newNode2,oAtive)

oDIv.removeChild(oAtice);
oDiv.replaceChild(newNode3,oAtive)

newNode = null; 释放对象

样式设置

nodeobj.style
对象.属性  ==  Python 对象.属性 获取

var oP = document.getElementById('box');
console.log(oP.style);
oP.style.color = 'white';
oP.style.backgroundColor = 'black';
oP.style.width = '250px';
oP.style.textAlign = 'center';
oP.style.lineHeight = '250px';

等同于 在行内里面直接style.color = xxx 属性

<style>
.highLight{
width = ’200px‘;
textAlign = 'center';
color = 'white';
}
</style>

通过控制属性的类名来控制样式  
oP.setAttribute('class','highLight')

等同于 通过 <style>。。</style>  在这里面设置属性

事件 onclick

onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框内容改变事件
onselect 文本框内容被选中事件
onfocus 光标聚焦事件
onblur 光标失焦事件
onload 网页加载事件
  • 盒子 没有指定pading、margin、border 默认就是元素大小
<div id = 'box' onclick="add()"></div>

var oDiv = document.getElementById('box');
匿名函数 (建议使用：)
var isBlue = true;
oDiv.onclick = function(){
if(isBlue){
this 指向了当前的元素节点对象
this.style.backgroundColor = 'red';
isBlue = false;
}else{
this.style.backgroundColor = 'blue';
isBlue = true;
}
// alert(‘事件被触发了’)

};

var add = function(){
alert(‘事件被触发了’)
}
oDiv.onclick = add;

function add(){
alert(1111);
}

onmouseover()  onmouseout()

1、找到触发的事件对象 
var oDiv = document.getElementById('box');

2.鼠标划过事件  
oDiv.onmouseover = function(){
3，事件处理程序
this.style.backgroundColor = 'green';
}

oDiv.onmouseout = function(){
this.style.backgroundColor = 'red';
}

  • 表单控件上的事件

    <form action="">
      <p class="name">
          <label for="username">用户名:</label>
          <input type="text" name="user" id=username>

      </p>
      <p class="pwd">
          <label for="pwd">密码:</label>
          <input type="password" name="pwd" id="pwd">
      </p>
      <input type="submit" name="">
  </form>

  <script type="text/javascript">

      var userNname = document.getElementById('username');
      var newNode = document.createElement('span');
      userName.onfocus = function(){
          newNode.innerHTML = '请输入用户名';
          newNode.setAttribute('class','text');
          userName.parentNode.appendChild(newNode);
      }

      userName.onblur = function(){
          newNode.innerHTML = '请输入正确用户名';
          newNode.setAttribute('class','text');
          userName.parentNode.appendChild(newNode);
      }

  </script>
  • 函数表达式和对象dict中采用 表示value，函数可以作为一个变量使用，a = 函数 上面的写法就是 事件 = function(){} 叫做匿名函数，没有命名的函数
fav:function(a){
alert('爱好')
return '姑凉' + a + '岁';

var division = function(a,b){
return a / b;
}
  • 内容选中事件和内容改变事件
onselect   onchange
var textArea = document.getElementsByTagName('textArea')[0];
var inputobj = document.getElementsByTagName('input')[0];

        textArea.onselect = function(){
            console.log('内容被选中');

        }
        inputobj.onchange = function(){
            console.log('内容被改变了')
        }
        inputobj.oninput = function(){
            console.log(this.value);
            console.log('内容被实时改变了')

        }
  • 窗口加载事件
setTimeout(function(
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function(){
this.innerHMTML = 'alex';
),0)

提供了方法实现：
等待文档元素加载完成才会调用onload()    script写在head里面需要加入  事件覆盖 多个onload 会出现
window.onload = function(){
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function(){
this.innerHMTML = 'alex';
}
}

CURD 

js特效案例介绍
1.图片轮播切换
2、显示和隐藏图片
3、焦点图片切换
4、关闭小广告
5、图片切换
6、百度换肤
7、tab选项卡
8、发表评论
9、九空格布局
10、定时器鲜花表白
11、时钟案例
12、瀑布流  懒加载 
13、轮播图
14、无缝轮播图
15、旋转木马
16、放大镜效果

dom操作 js Vue react 微信小程序

图片轮播切换