首页 > 博客列表 > DOM 元素的增删改查操作 ----0406

博主信息

博文 18

粉丝 1

访问量 16113

专题推荐

更多>

一、快速获取 DOM 元素

1.使用 js 基本语法，仿写 jQuery 的 “$”

<body>
    <ul class="list">
      <li class="item">item1</li>
      <li class="item">item2</li>
      <li class="item">item3</li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>
    <script>
      // $("body"): jQuery 用这个语法来获取'body'元素
      let $ = selector => document.querySelector(selector);
      console.log($);
      console.log($("body"));
      // 设置 body 的背景颜色
      $('body').style.background = "lightcyan";
    </script>
</body>

2.获取所有满足条件的元素的集合

<ul class="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
</ul>
<script>
    // 获取满足条件的元素的集合
    const items = document.querySelectorAll(".list .item");
    // NodeList: 类数组
    // 遍历 items 元素
    // NodeList有一个forEach()接口
    // item: 正在遍历的当前元素,必选
    // index: 当前元素的索引
    // items: 当前遍历的数组对象
    items.forEach(function (item, index, items) {
    console.log(item, index, items);
    });
    // 使用箭头函数简化，以后这个语法使用更多
    items.forEach(item => console.log(item));
    // 思考：如何获取第一个满足条件的元素？
    let firstItem = items[0];
    console.log(firstItem);
    firstItem.style.background = "lightgreen";
</script>

3.获取满足条件的元素集合中的第一个元素

<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>
<script>
  // 获取满足条件的元素集合中的第一个元素
  firstItem = document.querySelector(".list .item");
  console.log(firstItem);
  firstItem.style.background = "green";
  // querySelector()总是返回唯一元素，常用于 id
  // querySelectorAll, querySelector, 也可以用在元素上
  let list = document.querySelector(".list");
  let items = list.querySelectorAll(".item");
  console.log(items);
  // NodeList它自了一个迭代器接口, for-of 进行遍历
  for (let item of items) {
    console.log(item);
  }
  //  以下传统方式, es6 以后不推荐使用
  //   document.getElementById()
  //   document.getElementsByTagName()
  //   document.getElementsByName()
  //   document.getElementsByClassName()
</script>

4.快速获取一些特定的元素

<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
</ul>
<form action="" name="hello" id="login">
  <input type="email" placeholder="demo@email.com" />
  <button>提交</button>
</form>
<script>
  // 快速获取一些特定的元素
  // body
  console.log(document.body);
  // head
  console.log(document.head);
  // title
  console.log(document.title);
  // html
  console.log(document.documentElement);
  //forms
  console.log(document.forms);
  console.log(document.forms[0]);
  // <form action="" name="hello" id="login">
  console.log(document.forms["hello"]);
  console.log(document.forms["login"]);
  console.log(document.forms.item(0));
  console.log(document.forms.item("hello"));
  console.log(document.forms.item("login"));
  console.log(document.forms.namedItem("hello"));
  // forms.id
  // 推荐用id,因为id方便添加样式
  console.log(document.forms.login);
  console.log(document.forms.hello);
</script>

二、DOM 树的遍历和元素的获取

1. 将类数组转为真正的数组类型

<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
  <li class="item">item6</li>
</ul>
<script>
  // dom树中的所有内容都是:节点
  // 节点是有类型的: 元素,文本,文档,属性..
  let nodes = document.querySelector(".list");
  console.log(nodes.childNodes);
  // 通常只关注元素类型的节点
  console.log(nodes.children);
  let eles = nodes.children;
  // 遍历
  // 将类数组转为真正的数组类型
  console.log([...eles]);
  [...eles].forEach(ele => console.log(ele));
  // 获取第一个
  let firstItem = eles[0];
  firstItem.style.background = "yellow";
  // 最后一个
  //   let lastItem = eles[4];
  let lastItemIndex = eles.length - 1;
  let lastItem = eles[lastItemIndex];
  lastItem.style.background = "lightblue";
</script>

2. 使用 js 提供的快捷方式来获取第一个和最后一个

firstElementChild 获取第一个
lastElementChild 获取最后一个

<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
  <li class="item">item6</li>
</ul>
<script>
  // js提供一些快捷方式来获取第一个和最后一个
  const list = document.querySelector(".list");
  firstItem = list.firstElementChild;
  firstItem.style.background = "seagreen";
  lastItem = list.lastElementChild;
  lastItem.style.background = "yellow";
  console.log(eles.length);
  console.log(list.childElementCount);
</script>

3. 兄弟节点的获取

nextElementSibling 下一个兄弟节点
previousElementSibling 前一个兄弟节点

<ul class="list">
  <li class="item">item1</li>
  <li class="item">item2</li>
  <li class="item">item3</li>
  <li class="item">item4</li>
  <li class="item">item5</li>
  <li class="item">item6</li>
</ul>
<script>
  //   如何想获取第二个元素怎么办?
  //   第二个元素就是第一个元素的下一个兄弟节点
  let secondItem = firstItem.nextElementSibling;
  secondItem.style.background = "red";
  // 获取第5个, 是最后一个元素的前一个兄弟节点
  let fiveItem = lastItem.previousElementSibling;
  fiveItem.style.background = "cyan";
</script>

三、DOM 树元素的增删改查

1.创建 DOM 元素，并添加到页面显示

// 创建dom元素
let div = document.createElement("div");
let span = document.createElement("span");
span.textContent = "hello";
// append(ele,'text'),将参数做为父元素的最后一个子元素追加到列表中,无返回值
// span 添加到 div中
// div.append(span);
// 将 span,"world"，添加到 div中
div.append(span, " world");
// 方式一： 将 div 添加到页面
document.body.append(div);
console.log(div)
// 方式二：将 span, " world" 添加到页面
// document.body.append(span, " world");
// console.log(div)

2.为什么div中的span消失了?

// 为什么div中的span消失了?
// 新元素span只能插入到一个地方;span在div,现在span在body中,相当于剪切操作
// 如果想保留span在div中,要克隆span
// cloneNode(true), true: 是完整的保留元素内部结构
document.body.append(span.cloneNode(true), " world");

效果如图：

3. DOM 树元素的增删改

append():在尾部追加
prepend():在头部追加
before():在参考点之前添加一个新节点
after():在参考点之后添加一个新节点
replaceWith():替换元素
remove(无参数):删除元素
afterBegin: 开始标签之后,第一个子元素
beforeBegin: 开始标签之前,是它的前一个兄弟元素
afterEnd: 结束标签之后,它的下一个兄弟元素
beforeEnd: 结束标签之前,它的最后一个子元素

// append()创建一个列表
const ul = document.createElement("ul");
// 循环来生成多个列表项 li
for (let i = 1; i <= 5; i++) {
let li = document.createElement("li");
li.textContent = `item${i}`;
ul.append(li);
}
document.body.append(ul);
// append():在尾部追加
// prepend():在头部追加
li = document.createElement("li");
li.textContent = "first item";
li.style.color = "red";
ul.prepend(li);
// 如果想在除了头尾之外的地方添加怎么操作?
// 必须要有一个参考节点的位置,否则就不知道要添加到哪个节点的前面或后面
// 以第四个节点为参考
const referNode = document.querySelector("li:nth-of-type(4)");
referNode.style.background = "cyan";
// 在它之前添加一个新节点
li = document.createElement("li");
li.textContent = "在参考节点之前插入";
li.style.background = "yellow";
// referNode.before(el),在插入位置(参考节点)上调用
referNode.before(li);
// 在它之后添加一个新节点
li = document.createElement("li");
li.textContent = "在参考节点之后插入";
li.style.background = "violet";
// referNode.after(el),在插入位置(参考节点)上调用
referNode.after(li);
// 替换节点
// 将最后一个节点用链接替换
let lastItem = document.querySelector("ul li:last-of-type");
let a = document.createElement("a");
a.textContent = "php中文网";
a.href = "https://php.cn";
lastItem.replaceWith(a);
// 删除节点,在被删除的节点上直接调用
// 将ul的第6个删除,remove(无参数)
ul.querySelector(":nth-of-type(6)").remove();
// 再介绍几个更牛的
// insertAdjacentElement('插入位置', 元素)
// 插入位置有四个
// afterBegin: 开始标签之后,第一个子元素
// beforeBegin: 开始标签之前,是它的前一个兄弟元素
// afterEnd: 结束标签之后,它的下一个兄弟元素
// beforeEnd: 结束标签之前,它的最后一个子元素
// 插入第一个子元素之前(在起始标签之后);
li = document.createElement("li");
li.textContent = "第一个子元素";
ul.insertAdjacentElement("afterbegin", li);
ul.insertAdjacentElement("beforebegin", li);
// 还有一个plus,可以直接使用html字符串当元素,省去了创建元素的过程
// 追加到结尾
ul.insertAdjacentHTML("beforeEnd", '<li style="color:red">最后一个子元素</li>');
// 还可以直接插入文本
const h2 = document.createElement("h2");
h2.insertAdjacentText("beforeend", ul.lastElementChild.textContent);
console.log(h2);
document.body.insertAdjacentElement("afterend", h2);

批改老师：

天蓬老师

批改状态：合格

老师批语：dom,api众多,再多查阅mdn

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0319作业

2021-03-25 12:01:48