【前端JavaScript WebAPI】02 - 自定义属性和

2020-12-02 本文已影响0人 itlu

1. 自定义属性操作

1.1 获取属性值的两种方式

1.element.属性 获取属性值

element.getAttribute('属性');

区别

element.属性 获取内置属性值（元素本身自带的属性）；
element.getAttribute('属性'); 主要获取自定义的属性程序员自己定义的属性，但是也可以获取内置属性。

<body>
<div id="demo" index="1"></div>
<script>
  let div = document.querySelector('div');
  // 获取元素属性
  // element.id 获取元素自身自带的属性
  console.log(div.id);
  // element.getAttribute('属性') 自己添加的属性 只能通过 getAttribute 获取
  let index = div.getAttribute("index");
  console.log(index);
</script>
</body>

1.2 设置属性值

设置属性值

element.值 = '值'; 设置内置属性的属性值；
element.setAttribute('属性名','值');

区别

element.值 = '值'; 设置内置属性的属性值；
element.setAttribute('属性名','值'); 主要设置自定义属性（标准）。

<body>
<div id="demo" index="1"></div>
<script>
  let div = document.querySelector('div');
  // 设置值
  div.id = 'final';
  // 通过setAttribute设置属性值
  div.setAttribute('index', '2');
</script>
</body>

1.3 移出属性

element.removeAttribute('属性');

<body>
<div id="demo" index="1"></div>
<script>
  let div = document.querySelector('div');
  // 移除属性
  div.removeAttribute('index');
</script>
</body>

1.4 H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’)获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

如果通过元素 element.自定义属性 的方式获取自定义属性结果是 undefined。
H5对自定义属性的规范需要使用 data-属性名 的方式命名。方便开发者识别。

获取自定义属性的三种方式

element.getAttribute('自定义属性名称');
element. dataset.属性（去除data-）；例：自定义属性名为 'data-index' element. dataset.index（去除data-）
element.dataset[属性（有多条横线分割时转换为驼峰的方式）] ；例：自定义属性名称data-list-index。element.dataset['listIndex']。存在兼容性问题。在ie11才支持。

2. 节点操作

2.1 节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点使用 node来表示。
HTML DOM 树中的所有节点均可通过 JavaScript进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

DOM树

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点：nodeType 为 1；
属性节点 nodeType为2；
文本节点 nodeType为3。（文本节点包含文字、空格、换行）

我们在实际开发中主要操作的是元素节点。

2.2 节点层级

利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

节点层级

2.3 父级节点

node.parentNode

parentNode属性可返回某节点的父节点，注意是最近的一个父节点。
如果指定的节点没有父节点则返回null。

<body>

<!-- 节点的优点 -->
<div>我是div</div>
<span>我是span</span>

<ul>
  <li>我是li</li>
  <li>我是li</li>
  <li>我是li</li>
  <li>我是li</li>
  <li>我是li</li>
</ul>

<div class="demo">
  <div class="box">
    <span class="erweima">
      x
    </span>
  </div>
</div>
<!-- Emmet蚂蚁 -->
<script>
  let erweima = document.querySelector('.erweima');
  let box = erweima.parentNode;
  console.log(box);
</script>
</body>

2.4 子节点

所有子节点

parentNode.childNodes(标准);

parentNode.childNodes(标准);返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有子节点，包含元素节点，文本节点。
如果我只想获取里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes。

通过childNodes获取的元素节点

子元素节点

parentNode.  children(非标准);

parentNode. children(非标准);是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个需要重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持。因此我们可以放心使用。

第1个子节点

parentNode.firstChild

firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。

最后1个子节点

parentNode.lastchild

lastchild 返回最后一个节点，找不到则返回null。同样，也是包含所有的节点。

第1个子元素节点

parentNode.firstElementNode

firstElementNode返回第一个子元素的节点，找不到返回null。

最后1个子元素节点

parentNode.lastElementNode

lastElementNode返回第一个子元素的节点，找不到返回null。
注意：这两个方法有兼容性问题，IE9以上才支持。

实际开发中，`firstChild`和 `lastChild` 包含其他节点，操作不方便，而 `firstElementChild`和 `lastElementChild`又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案

如果想得到第一个元素节点，可以使用parentNode.children[0];
如果想要得到最后一个子元素节点，可以使用parentNode.children[parentNode.children.length - 1].

子节点全部代码 :

<body>
<div>我是div</div>
<span>我是span</span>

<ul>
  <li>我是li</li>
  <li>我是li</li>
  <li>我是li</li>
  <li>我是li</li>
  <li>我是li</li>
</ul>

<ol>
  <li>我是ol中第一个li</li>
  <li>我是ol中的li</li>
  <li>我是ol中的li</li>
  <li>我是ol中的li</li>
  <li>我是ol中最后一个li</li>
</ol>

<div class="demo">
  <div class="box">
    <span class="erweima"></span>
  </div>
</div>

<script>
  // 以前 获取 ul中的li的方式
  let ul = document.querySelector('ul');
  let li = ul.querySelectorAll('li');
  let ol = document.querySelector('ol');
  console.log(li);
  // 子节点
  console.log(ul.childNodes); // 返回结果包含 空格 回车 文本 元素 等 根据节点类型判断是元素节点还是文本节点
  // 获取子元素节点 children 是实际开发中常用的
  console.log(ul.children); // 获取所有的子元素节点

  // 获取 ol 中的第一个 li 和最后一个 li firstChild 是第一个子节点不管是文本节点还是元素节点
  console.log(ol.firstChild);
  console.log(ol.lastChild);

  // 2. firstElementChild firstElementChild
  console.log(ol.firstElementChild);
  console.log(ol.lastElementChild); // 但是有兼容性问题只有ie9以上才支持

  // 3. 实际开发中既没有兼容高性问题又返回第一个和最后一个子元素
  console.log(ol.children[0]);
  console.log(ol.children[ol.children.length - 1]);
</script>
</body>

2.5 创建节点

document.createElement('tagName');

document.createElement('tagName');方法创建由 tagName指定的 HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建袁术节点。

2.6 添加节点

node.appendChild(child);

node.appendChild(child); 方法将一个节点添加到指定父节点的子节点列表末尾，类似于CSS里面的after伪元素。

node.insertBefore(child,指定元素);

node.insertBefore(child,指定元素); 方法将一个节点添加到父节点的指定子节点的前面。类似于CSS里面的before伪元素。

<body>
<ul></ul>
<script>
  // 1. 创建节点元素节点
  let li = document.createElement('li');
  // 2. 添加节点 node.appendChild(child) node 父级 child
  let ul = document.querySelector('ul');
  ul.appendChild(li);
  // 3.  在前面添加节点 node.insertBefore(child , 指定元素)
  let lili = document.createElement('li');
  // 将创建的lili元素添加到第一个元素之前
  ul.insertBefore(lili, ul.children[0]);
</script>
</body>

3. 案例：简易留言板（创建、添加节点）

留言板案例

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      padding: 100px;
    }

    .content {
      width: 300px;
      margin: 100px auto;
    }

    textarea {
      float: left;
      width: 200px;
      height: 30px;
      line-height: 30px;
      padding-left: 15px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      outline: none;
      resize: none;
      border-radius: 6px;

    }

    button {
      display: block;
      float: left;
      border: 0;
      outline: 0;
      width: 50px;
      height: 30px;
      margin-left: 20px;
      color: #ffffff;
      background: skyblue;
    }

    ul {
      margin-top: 20px;
    }

    li {
      width: 300px;
      padding: 5px;
      background-color: rgb(72, 245, 232);
      color: #fff;
      font-size: 14px;
      margin: 15px 0;
      border-radius: 6px;
    }
  </style>

<div class="content">
  <div class="edit" style="overflow: hidden;">
    <textarea name="" id=""></textarea>
    <button>发布</button>
  </div>
  <ul>
  </ul>
</div>


<script>
  let button = document.querySelector('button');
  let textarea = document.querySelector('textarea');
  let ul = document.querySelector('ul');
  button.onclick = function () {
    if (textarea.value === '') {
      alert("您输入的内容为空!");
      return false;
    }
    let li = document.createElement('li');
    // 拿到文本域的内容
    li.innerHTML = textarea.value;
    // 新发布的内容永远是第一个的前面
    ul.insertBefore(li, ul.children[0]);
    // 发送完成之后清空文本域
    textarea.value = '';
  }
</script>

【前端JavaScript WebAPI】02 - 自定义属性和

1. 自定义属性操作

1.1 获取属性值的两种方式

区别

1.2 设置属性值

设置属性值

区别

1.3 移出属性

1.4 H5自定义属性

H5给我们新增了自定义属性：

获取自定义属性的三种方式

2. 节点操作

2.1 节点概述

2.2 节点层级

2.3 父级节点

2.4 子节点

所有子节点

子元素节点

第1个子节点

最后1个子节点

第1个子元素节点

最后1个子元素节点

实际开发中，`firstChild`和 `lastChild` 包含其他节点，操作不方便，而 `firstElementChild`和 `lastElementChild`又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案

子节点全部代码 :

2.5 创建节点

2.6 添加节点

3. 案例：简易留言板（创建、添加节点）

猜你喜欢

热点阅读

【前端JavaScript WebAPI】02 - 自定义属性和

1. 自定义属性操作

1.1 获取属性值的两种方式

区别

1.2 设置属性值

设置属性值

区别

1.3 移出属性

1.4 H5自定义属性

H5给我们新增了自定义属性：

获取自定义属性的三种方式

2. 节点操作

2.1 节点概述

2.2 节点层级

2.3 父级节点

2.4 子节点

所有子节点

子元素节点

第1个子节点

最后1个子节点

第1个子元素节点

最后1个子元素节点

实际开发中，firstChild和 lastChild 包含其他节点，操作不方便，而 firstElementChild和 lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？

解决方案

子节点全部代码 :

2.5 创建节点

2.6 添加节点

3. 案例：简易留言板（创建、添加节点）

猜你喜欢

热点阅读

实际开发中，`firstChild`和 `lastChild` 包含其他节点，操作不方便，而 `firstElementChild`和 `lastElementChild`又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？