createElement, parentNode, removeChild, appendChild

2024-01-01 10:34:11

1获取父节点

var childNode = document.getElementById("child");
var parentNode = childNode.parentNode; // 获取父节点

利用dom获取元素要嵌套
引出：利用父子兄节点关系获取元素

  • 标签，元素，元素节点
  • 空格，文本节点
  • 属性节点

dom树中所有节点都能通过js访问
节点至少有nodetype，nodename，nodevalue

元素节点 nodetype=1
属性节点 nodetype=2
文本节点 nodetype=3（文字，空格，换行）
节点操作主要操作的是元素节点

如果只想获得里面元素节点：

for(var i=0;i<ul.childNodes.length;i++)
{
?? ?if(ul.childNodes[i].nodeType==1) {
?? ?console.log(ul.childNodes[i]);
?? ?}
}

2 parentNode.children获取所有子元素节点

3 .children[0],.children[ol.children.length-1]（ol是变量，具体见楼下代码）

<body>
  <ol>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
  </ol>
  <script>
    var ol=document.querySelector('ol');
    // 1 firstchild获得第一个字节点，不管是文本还是元素
    console.log(ol.firstChild);
    // 2 firstElementChild 返回第一个子元素节点,都有兼容性问题
    console.log(ol.firsttElementChild);
    console.log(ol.children[0]);
    console.log(ol.children[ol.children.length-1]);


  </script>
</body>

新浪下拉菜单

html结构：一个大ul里包括四个li，每个li里上下栏，上栏是a标签，下栏是ul包含三个li

<ul class="nav">
    <li><a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>

    <li><a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <li><a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>
    <li><a href="#">微博</a>
      <ul>
        <li><a href="#">私信</a></li>
        <li><a href="#">评论</a></li>
        <li><a href="#">@我</a></li>
      </ul>
    </li>


  </ul>

css：

<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
      color: black;

    }

    .nav {
      margin: 100px;
    }

    .nav>li {
      position: relative;
      float: left;
      height: 41px;
      width: 80px;
      text-align: center;
    }

    .nav li a {
      display: block;
      height: 100%;
      width: 100%;
      line-height: 41px;
      color: #333;

    }

    .nav>li>a:hover {
      background-color: #eee;
    }

    .nav ul {
      display: none;
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
      border-left: 1px solid #FECC5B;
      border-right: 1px solid #FECC5B;
    }

    .nav ul li {
      border-bottom: 1px solid #FECC5B;
    }

    .nav ul li a:hover {
      background-color: #FFF5DA;
    }
  </style>

js的思路：

1 导航栏里li都要鼠标经过效果，循环注册鼠标事件
2 鼠标里第二个孩子ul显示，鼠标离开第二个孩子ul消失

<script>
    var nav = document.querySelector('.nav');
    var lis = nav.children;//得到四个li
    for (var i = 0; i < lis.length; i++) {
      lis[i].onmouseover = function () {
        this.children[1].style.display = 'block';
      }
      lis[i].onmouseout = function () {
        this.children[1].style.display = 'none';
      }
    }
  </script>

获得兄弟节点（用的较少）

nextSibling获得下一个兄弟节点，包括元素节点，文本节点
previousSibling前一个兄弟节点，包括元素节点，文本节点
nextElementSibling 得到下一个兄弟元素节点

通过封装兼容性函数：
function getNextElementSibling(element) {
	var el = element;
	while(el = el.nextSibling) {
	 if(el.nodeType===1) {
	 return el;
	 }
	}
	return null;
}

原本ul里没有li，根据情况动态创建li放ul里
1 创建节点元素节点
var li = document.createELement('li')
2 添加节点node父级 child 子级
var ul = document.queryselector('ul')
ul.appendchild(li);//（后面新增加元素）
3 如果原来就有li元素，那么新建的元素跟在原来的后面
4 node.insertBefore(child,指定元素)
//将一个节点添加到父节点指定子节点前面
var lili = document.createelement('li');
ul.insertbefore(lili,ul.children[0]);
//在第一个元素前面插入元素

发布留言案例：

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

    textarea {
      margin: 10px;
    }

    li {
      list-style: none;
      height: 40px;
      width: 400px;
      margin: 10px;
      background-color: pink;
    }
  </style>
<textarea name="" id="" cols="30" rows="10"></textarea>
  <button>fabu</button>
  <ul>

  </ul>
<script>
    // 1获取元素
    var btn = document.querySelector('button');
    var text = document.querySelector('textarea');
    var ul = document.querySelector('ul');
    // 2 注册事件
    btn.onclick = function () {
      if (text.value == '') {
        alert('no content');
        return false;//当文本框内没内容时，阻止事件发生
      }
      else {
        var li = document.createElement('li');
        li.innerHTML = text.value;
        // ul.appendChild(li);
        // 因为一般新发布留言都在最上面，改用insertbefore
        ul.insertBefore(li, ul.children[0]);

      }
    }

  </script>

node.removechild(child)删除子节点：

var ul = document.querySelector('ul');
var btn = document.querySelector('button');

btn.onclick=function() {
 if(ul.children.length==0)
btn.disable=true;

else
ul.removeChild(ul.children[0]);
}

留言框删除留言：

当我们把文本区域内的值赋值给li的时候，多加一个删除的链接
需要把所有链接取过来，点击当前链接时候，删除当前链接的li

1 加入删除按钮

 li.innerHTML = text.value + "<a href='javascript:'>shanchu</a>";

注意这里不是#：阻止链接跳转：添加javascript:void(0)/javascript:;

2 注意removechild只能删除他的孩子（删除a的上级li）：

重点：?

ul.removeChild(this.parentNode);
<script>
    //获取元素
    var ul = document.querySelector('ul');
    var text = document.querySelector('textarea');
    var btn = document.querySelector('button');
    btn.onclick = function () {
      if (text.value == '') {
        alert('no content');
        return false;
      }
      else {
        var li = document.createElement('li');
        li.innerHTML = text.value + "<a href='javascript:'>shanchu</a>";
        ul.insertBefore(li, ul.children[0]);

        // 删除元素 删除他的父亲 
        //发现需要拿到所有链接
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
          as[i].onclick = function () {
            ul.removeChild(this.parentNode);
          }
        }
      }


    }



  </script>

复制节点

var li = ul.children[0].cloneNode(true);
//这里括号为空或者为false表示浅拷贝，里面为true表示深拷贝
//只有深拷贝又拷贝元素又拷贝内容

动态生成表格：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      width: 500px;
      margin: 100px auto;
      border-collapse: collapse;
      text-align: center;
    }

    td,
    th {
      border: 1px solid #333;
    }

    thead tr {
      height: 40px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <table cellspacing="0">
    <thead>
      <tr>
        <th>姓名</th>
        <th>科目</th>
        <th>成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>
    // data.length个tr
    // for k in data[i] 个td

    var data = [{
      name: 'name1',
      subject: 'sub1',
      score: 8
    }, {
      name: 'name2',
      subject: 'sub2',
      score: 8
    },
    {
      name: 'name3',
      subject: 'sub2',
      score: 2
    }
    ];
    //把对象obj放在数组里

    var tbody = document.querySelector('tbody');
    for (var i = 0; i < data.length; i++) {


      var tr = document.createElement('tr');
      tbody.appendChild(tr);
      for (var k in data[i]) {
        var kk = document.createElement('td');
        kk.innerHTML = data[i][k];
        tr.appendChild(kk);
        // 记住在obj里有：
        // (var k in obj)
        // k为属性，obj[k]是值
      }
      var td = document.createElement('td');
      td.innerHTML = '<a href = "javascript:;">shanchu</a>';
      // 注意这里单引号里面一定是双引号，javascript后面的：；
      tr.appendChild(td);
    }
    var da = document.querySelectorAll('a');
    for (var i = 0; i < da.length; i++) {
      da[i].onclick = function () {
        tbody.removeChild(this.parentNode.parentNode);
      }
    }
  </script>
</body>

</html>

document.write('<div>123</div>')
如果页面文档流加载完毕，再调用这句话会导致页面重绘，比如增加事件如onclick
window.onload = function() {
	整个页面加载完毕再调用js

}

第一种创建方式可以通过for循环达到添加多次多个元素的效果
for(var i=0;i<=100;i++)
inner.innerhtml += '<a href="javascript:;">shanchu</a>'

第一种方式转化成数组效率最高

var arr=[];
for(var i=0;i<100;i++)
{
 arr.push('<a href="#"></a>');
inner.innerHTML=arr.join('');//转化为数组
}

文章来源:https://blog.csdn.net/alicca/article/details/135022768
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。