前端——js函数+DOM对象

一、函数

1.构建函数

  // 接受实参

    function name(t1, t2, t3, t4) {

      // code

      console.log(t1, t2, t3, t4);

    }

2.执行函数

name()

3.return

   function xxx() {

      return 'xxxx'

      console.log('return 后的代码不执行');

    }

4.箭头函数

>常常以匿名函数的身份，出现在js中。

    () => {

    }

  let x = o => '干净了，爽歪歪。'

    o => {

      return '干净了，爽歪歪。'

    }

二、DOM操作

1.DOM 获取   (选择器)

    // 单个

    console.log(

      document.querySelector('#app')

    );

    // 多个DOM

    console.log(

      document.querySelectorAll('ol li')

    );

2.事件

    let i = 0;

    document.querySelector('button').onclick = () => {

      // 事件函数

      console.log('点我干嘛？', i++);

    }

3.内容操作

    let app = document.querySelector('#app');

    // html

    app.innerHTML = ` <b>我是b</b> `

    app.innerText = ` <b>我是b</b> `

4.属性操作

pp.title = 'app';

    document.querySelector('img').src = 'https://img2.baidu.com/it/u=299663851,4260094678&fm=253&fmt=auto&app=120&f=JPEG?w=818&h=800'

5.行内样式

  app.style.fontSize = '40px'

6.操作class

1.增

   app.classList.add('box')

    app.classList.add('back')

2.删

 app.classList.remove('box')

3.切换

    document.querySelector('button').onclick = () => {

      // 事件函数

      console.log('点我干嘛？', i++);

 

      app.classList.toggle('back');

    }

4.判断

    console.log(app.classList.contains('back'));

7.创建DOM

  // 妙娃种子

    let img = document.createElement("img");

    img.src = 'https://img2.baidu.com/it/u=299663851,4260094678&fm=253&fmt=auto&app=120&f=JPEG?w=818&h=800'

 

    // 闪电耗子

    let img2 = document.createElement("img");

    img2.src = 'https://img2.baidu.com/it/u=3018400876,3718749332&fm=253&fmt=auto&app=138&f=JPEG?w=870&h=489'

8.将元素添加到DOM树中

//appendChild 方法用于将一个节点添加到父节点的子节点列表的末尾。

    // app.appendChild(img);//将img元素作为app元素的最后一个子节点添加到DOM中。

    //insertBefore 方法用于在指定的子节点之前插入一个节点（或一个新创建的节点）。

    //这个方法接受两个参数：第一个是要插入的节点，第二个是参考节点（即新节点将被插入到这个参考节点之前的位置）

    app.insertBefore(img2, document.querySelector("#hz"));//在app元素中找到ID为hz的元素之前插入img2元素。

    // app.appendChild(img2)

9.将元素从DOM树中删除

     // app.removeChild(img)

    // img2.remove();

三、封装DOM的构建

// 创建DOM函数

    function createDOM(DOMObj, root) {

      // 标签名

      let DOM = document.createElement(DOMObj.TN);

      // 属性

      // class

      for (const key in DOMObj) {

        DOM[key] = DOMObj[key]

      }

      // style 函内样式

      for (const key in DOMObj.style) {

        DOM.style[key] = DOMObj.style[key]

      }

      // 子盒子 (判断数据类型)

      if (DOMObj.TNC) {

        if (Array.isArray(DOMObj.TNC)) {

          DOMObj.TNC.forEach(element => {

            createDOM(element, DOM)

          });

        } else {

          createDOM(DOMObj.TNC, DOM)

        }

      }

      // console.log(DOM);

      // 丢入容器

      if (root) {

        root.appendChild(DOM);

      }

 

      return DOM;

    }

 

    createDOM({

      TN: 'div', innerText: '我是被宇智波厚度，构建出来的。', title: '我是被宇智波厚度，构建出来的。',

      className: 'box', style: { fontSize: '30px', border: "solid" },

      TNC: { TN: "i", innerText: "我是i标签" }

    }, document.querySelector("#app"))

      ;