15- JavaScript-DOM操作

 

1. window和document

1.window

所有的浏览器都支持window对象，它支持浏览器窗口
所有的js全局对象，函数以及变量都能自动成为window对象的成员
全局变量是window对象的属性，全局函数是window对象的方法

2.document

document也是window对象的属性之一
document对象是documentHTML的一个实例，
也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
常用属性
    console.log(document);
    console.log(document.childNodes);
    console.log(document.head);
    console.log(document.body);
    document.title = "测试";
    console.log(document.title);

2. 事件

定义

用户和浏览器之间的交互行为,	比如：点击按钮，鼠标进入/离开、双击...
我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码将会执行

比如: 按钮点击
  方式一
      结构和行为耦合，不方便维护，不推荐使用	
      <button id="btn" onmousemove="alert('你干嘛摸我?');">按钮1</button>
  方式二
      var btn = document.getElementById('btn');
      btn.onclick = function (ev) {
        alert('你再点一下试试?');
 }

3. 文档加载过程

1. 存在问题

浏览器在加载一个页面时，是按照自上向下的顺序加载的
读取到一行就运行一行, 如果将script标签写到head内部，
在代码执行时，页面还没有加载，页面中的DOM对象也没有加载
会导致在js中无法获取到页面中的DOM对象

演示

2. 解决方案

onload事件
   onload事件会在整个页面加载完成之后才触发
   为window绑定一个onload事件, 该事件对应的响应函数将会在页面加载完成之后执行，
   这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
   把script标签放在body尾部
   建议: 两者综合

4. 获取DOM对象

        var btn1 = document.getElementById("btn");
        var btn2 = document.getElementsByClassName("my-btn")[0];
        var btn3 = document.getElementsByTagName("button")[0];
        var btn4 = document.getElementsByName("btn")[0];
        var btn5 = document.querySelector(".my-btn");
        var btn6 = document.querySelectorAll(".my-btn")[0];

5. 节点之间关系

1. 获取父节点

parentNode

案例
//通过子盒子设置父盒子的背景色

var btn = document.getElementsByClassName("btn")[0];
btn.onclick = function () {
  var span = document.getElementById("span");
  var box = span.parentNode;
  box.style.backgroundColor = "red";
};

2. 上一个兄弟节点

 var previous = span.previousElementSibling || span.previousSibling;

3. 下一个兄弟节点

 var next = span.nextElementSibling || span.nextSibling;

4. 获取标签中第一个子节点

box.firstElementChild || box.firstChild

5. 获取标签中最后一个子节点

box.lastElementChild || box.lastChild

6. 获取所有元素节点

nodeType
每个节点都有一个 nodeType 属性，用于表明节点的类型，节点类型由 Node 类型中定义12个常量表示

演示

 window.onload = function () {
        // 1. 获取标签
        var box = document.getElementById("box");
        // 2. 获取所有子节点
        var allNodeList = box.childNodes;
        console.log(allNodeList);

        var newList = [];
        for(var i=0; i<allNodeList.length; i++){
            var node = allNodeList[i];
            if(node.nodeType === 1){
               newList.push(node)
            }
        }

        console.log(newList);
    }

7. 获取任意兄弟节点

var mt = document.getElementsByClassName("mt")[0];
console.log(mt.parentNode.children[1]);

6. 节点操作

1. CRUD(增删改查)

创建节点

document.createElement("img");
box.appendChild(img);

box.insertBefore(img, btn);

删除节点

var btn = document.getElementById("btn");
word.parentNode.removeChild(word); // 自杀
 // btn.remove();

克隆节点

新节点=要复制的节点.cloneNode(参数) ; 

var box = document.getElementsByClassName("box")[0];
var newTag = box.cloneNode(true);
// console.log(newTag);

document.body.appendChild(newTag);

2. 节点属性（节点.属性）

获取：getAttribute(名称)
设置：setAttribute(名称, 值)
删除：removeAttribute(名称)