从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：CSSOM视图模式 — 今天你学习了吗？（JS：Day19）

文章目录

• 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
• • 前言
  • 第十五节课：DOM、BOM、焦点事件、键盘事件
  • • 一、JS三大组成部分
    • 二、DOM方法
    • • 1. childNodes
      • 2. children
      • 3.nodeType
      • 4. nodeName
      • 5. tagName
      • 6. firstChild
      • 7. parentNode
      • 8. offsetParent
      • 9. createElement/appendChild
      • 10. removeChild
      • 11. replaceChild
    • 三、BOM(browser object Model) 浏览器对象

前言

最近有点忙，又拉下了。

第十五节课：DOM、BOM、焦点事件、键盘事件

一、JS三大组成部分

1. es （ECMAScript） 语法
2. DOM 文档对象模型
3. BOM 浏览器对象模型

DOM：是一个对象文档对象模型
1.操作标签节点
2.严格不专属于js

        var box = document.querySelector('#box');// childNodes获取到所有的子节点，包括文本节点。console.log(box.childNodes);// text节点  文本节点 ：空格，任意的文字，换行，空白行// document.documentElement/* 节点：1.元素节点(ele) element2.text节点  文本节点 ：空格，任意的文字，换行，空白行3.属性节点4.注释节点comment*/// children:返回第一级子元素节点;console.log(box.children);// 元素节点的节点类型;console.log(box.childNodes[6].nodeType);// nodeName返回节点名称console.log(box.children[3].nodeName);// tagName返回节点名称 console.log(box.children[3].tagName);console.log(box.getAttribute('id')); // 值console.log(box.getAttributeNode('id')); //id 名 值console.log(box.getAttributeNode('name')); // null// 返回第一个节点console.log(box.firstChild);// 返回第一个元素节点       console.log(box.firstElementChild)// 返回最后一个节点console.log(box.lastChild);// 返回最后一个元素节点console.log(box.lastElementChild);// 兄弟节点console.log(box.nextSibling)// 兄弟元素节点console.log(box.nextElementSibling)// 找父节点console.log(box.parentNode)// 找父节点console.log(box.offsetParent)// 获取元素节点个数console.log(box.childElementCount);

效果：

二、DOM方法

1. childNodes

获取到所有的子节点，包括文本节点。

2. children

返回第一级子元素节点
box.children
返回一个类数组，类数组的取值操作：[ ]下标取值；
children是一个属性，不是一个方法，所以不用加（）

3.nodeType

元素节点的节点类型

var box = document.getElementById('box');console.log( box.childNodes[0].nodeType )   //3console.log( box.children[0].nodeType )  //1//不同的节点，数据类型是不一样。比如：类数组与类组，类型不一样。//百度找nodeType元素节点的类型：1;属性：2;text文本内容：3;注释：8;

4. nodeName

返回节点名称

console.log( box.children[0].nodeName );
123
123

box.children[0].onclick = function(){alert( 123 )
}
//children为类数组，类数组通常有length的方法;属于动态获取;只要里面孩子的个数变了，都能动态地反馈出来。

5. tagName

//与nodeName的区别 
console.log( box.childNodes[1].nodeName );  // document 能返回注释节点
console.log( box.childNodes[1].tagName );   // 返回undefined//区别：nodeName能返回各种各样的节点，但是tagName只能返回对象节点;

6. firstChild

//返回第一个子节点//在主流浏览器返回子节点//在低版本IE的情况下返回的是元素节点console.log( box.firstChild );

7. parentNode

//返回父节点 , 没有兼容问题console.log( box.parentNode );

8. offsetParent

div{width:300px; height:300px;background-color: #90f;}div#box{position:absolute; }p{background-color:#f0f;font-size:30px;}
123
123
//返回定位父级console.log( p2.offsetParent )

9. createElement/appendChild

创建元素与添加子节点，通常是结合起来使用的。
clone:

var cloneBox = box.cloneNode(); //有两个值，默认为false.false：  //代表的是浅复制，浅复制只复制节点本身，不复制子元素的内容，只复制标签本身。true：   //深度复制，深度复制里面有什么东西的话，JS里面也是要有（比如属性，事件，）。​document.body.appendChild( cloneBox );

10. removeChild

删除子节点（通过父级来杀，不能自杀）**

var wrap = document.getElementsByClassName('wrap');box.removeChild( wrap[1] );//如果有多个节点的话，先找到子节点之后再去找到父级

11. replaceChild

wrap1
wrap2
wrap3
wrap4
​var wrap = document.getElementsByClassName('wrap')[1];var p = document.createElement('p');p.innerHTML = 'p0';box.replaceChild( p , wrap );//node.replaceChild(newnode,oldnode)

三、BOM(browser object Model) 浏览器对象