Topic 1 ： tab的切换

网页示例：

代码示例 :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab栏切换</title>
	<style>
        * { margin:0; padding: 0; }
        ul {
            list-style-type: none;
        }
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .hd {
            height: 45px; 
        }
        .hd span {
            display: inline-block;
            width: 95px;
            background-color: pink;
            line-height: 45px;
            text-align: center;
            cursor: pointer;
        }
/*		注意这一句span.current*/
        .hd span.current {
            background-color: purple;
        }
        .bd div {
            height: 255px;
            background-color: purple;
            display: none;
        }
        .bd div.current {
            display: block;
        }
    </style>
</head>

<body>
	<div class="box">
        <div class="hd" id="hd">
            <span class="current">体育</span>
            <span >娱乐</span>
            <span>新闻</span>
            <span>综合</span>
        </div>
        <div class="bd" id="bd">
            <div class="current">我是体育模块</div>
            <div>我是娱乐模块</div>
            <div>我是新闻模块</div>
            <div>我是综合模块</div>
        </div>
    </div>
	<script>
		//  1. 思路就是： 所有的题目中只有鼠标经过的那个高亮显示   其他的都不要高亮显示
		//  就应该获取hd里面所有的span标签  给每个span标签都注册鼠标经过事件  只要鼠标经过的那个就把它
		//  置为current  其他的项要先清除这个样式
		//  2 . 就是实现对应的tab显示对应的内容    我们实现根据tab栏找内容就靠索引了
		var hdSpans = document.querySelectorAll('#hd span');
		var i,len = hdSpans.length;
		for (i = 0; i < len; i++) {
		// 记录span的索引   把索引记录到了标签的自定义属性中   我们实现根据tab栏找内容就靠索引了
        hdSpans[i].setAttribute('index', i);
			hdSpans[i].onmouseover = function () {
				for (var j = 0; j < len; j++ ) {
					// 先把全部的样式都消除掉  这样我们就不会出现tab栏都高亮显示的问题
					hdSpans[j].className = '';
				}
				//  当前的tab栏高亮显示  也就是说鼠标经过的那个高亮显示
				this.className = 'current';
				
				//  2.1获取所有的内容标签
				var divs = document.querySelectorAll('#bd div');
				//  因为这里得到的是字符串  所以我们这里强制转化一下  转化为整形
				var index = parseInt(this.getAttribute('index'));
				//  2.2  先把所有的内容都隐藏起来  跟第一步的道理一样
				var divLen = divs.length;
				for (j = 0; j < divLen; j++) {
					divs[j].className = '';
				}
				//  2.3  显示对应的内容
				divs[index].className = 'current';
			}
		}
		
		
	</script>
</body>
</html>

Topic 2 ：模拟DOM文档的结构

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>模拟DOM文档的结构</title>
</head>

<body>
  <div id="box"></div>

  <script>
    // // 元素节点
    // var box = document.getElementById('box');
    // // 元素节点  包括
    // // nodeName  标签的名称
    // // nodeType  节点的类型  1 元素节点
    // // nodeValue  当是元素节点的时候 nodeValue 始终是null
    // console.dir(box);
	  
    // // 属性节点 - 对象
    // // 获取属性节点
    // // nodeName   属性的名称
    // // nodeType   节点的类型   2 属性节点
    // // nodeValue  属性的值
    // var attr = box.getAttributeNode('id');
    // console.dir(attr);




    // 模拟DOM文档的结构
    // 属性  id className nodeName nodeType nodeValue   
	//注意一这是一个构造函数
    function Node(options) {
      // 当不传参数的时候 options是undefined
      // Cannot read property 'id' of undefined
      // console.log(options.id);

      // 设置默认值   这句话是保证在不传参数的时候options是unfined   ||一个没有定义的对象
      options = options || {};
	  // 保证这个属性没有id的时候  id 的默认值是空字符串   下面也是这样
      this.id = options.id || '';
      this.className = options.className || '';
      this.nodeName = options.nodeName || '';
		//  nodeType 的默认值是null
      this.nodeType = options.nodeType || 1;
		//  nodeValue 的默认值是null
      this.nodeValue = options.nodeValue || null;

      // 设置一个属性记录子元素
      this.children = [];
    }


    // 1 html元素   使用构造函数创建html对象  
	// 注意他的使用方法
    var html = new Node({
      nodeName: 'HTML'
    });

    // 2 head元素
    var head = new Node({
      nodeName: 'HEAD'
    });
	// 注意js中把一个对象放进数组中类似于我们写的压栈的写法  用push
    html.children.push(head);

    // 3 body元素
    var body = new Node({
      nodeName: 'BODY'
    });
    html.children.push(body);

    // 4 div 元素
    var div = new Node({
      id: 'box',
      nodeName: 'DIV'
    });
    body.children.push(div);

    //5 p
    var p = new Node({
      id: 'p',
      nodeName: 'P'
    });
    body.children.push(p);

    console.dir(html);
  </script>
</body>
</html>

Topic 3：元素节点，属性节点，文本节点的解析：

元素是节点的一种：叫做元素节点；

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点（包括回车符也是属于文本节点）
注释是注释节点
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。

元素也可以拥有属性。属性是属性节点。

总结：元素是元素节点，是节点中的一种，但元素节点中可以包含很多的节点。

来源于百度：

（1）元素节点：一般是拥有一对开闭合标签的元素整体，例如上图中的<ul>...</ul>这一部分都属于一个元素节点。

（2）属性节点：一般是元素节点的属性，比如上图中的“宽度”属性也就是width="80 px"这一部分。

（3）文本节点：DOM中用于呈现文本的部分，如上图中的 “点我” 儿子，一般被包含在元素节点的开闭合标签内部。

（4）文档节点：文档节点就是标签<document>所代表的语义范畴。

One ：父子节点：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>父子节点</title>
</head>

<body>
  <div id="box">
    <div>1111</div>
    <div>2222</div>
    <p>33333</p>
    <span>444444</span>
    <!-- abc -->
  </div>

  <script>
    var box = document.getElementById('box');
	  // 这是一个元素节点
	  
    // 获取box中所有的子节点
    // console.log(box.childNodes);
	  // var len = box.childNodes.length;
    // for (var i = 0; i < len; i++) {
    //   // 遍历所有的子节点，找到里面的元素   因为元素节点的节点类型是一
    //   if (box.childNodes[i].nodeType === 1) {
    //     console.log(box.childNodes[i]);
    //   }
    // }


    // 获取所有子元素
    console.log(box.children);

    // 父元素
    console.dir(box.parentNode);
  </script>
</body>
</html>

Two ：首尾节点：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>首尾节点</title>
</head>

<body>
	<ul id="ul">
        <li>first</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
        <li>last</li>
      </ul>


    <script src="../js/common.js"></script>
    <script>
      var ul = document.getElementById('ul');
		//节点包含的比元素节点要多

//       // 获取第一个子节点
//       console.dir(ul.firstChild);
//       // 获取第一个子元素
//       console.dir(ul.firstElementChild);


      // // 获取最后一个子节点
      // console.dir(ul.lastChild);
      // // 获取最后一个子元素
      // console.dir(ul.lastElementChild);
      
	  // 注意这些方法中只有firstElementChild（）； 有兼容性问题
      var firstElement = getFirstElementChild(ul);
      console.log(firstElement);
    </script>
</body>
</html>

注意这些方法中只有firstElementChild（）；有兼容性问题

Treee ：兄弟节点

<ul id="ul">
        <li>first</li>
        <li>1111</li>
        <li>0000</li>
        <li id="li">1111</li>
        <li>2222</li>
        <li>last</li>
      </ul>

      <script>
        var li = document.getElementById('li');


        // 获取的下一个兄弟节点
        console.log(li.nextSibling);

        // 下一个兄弟元素  （有兼容性问题）
        console.log(li.nextElementSibling);

        // li.previousSibling
        // li.previousElementSibling
      </script>

Topic 4 ：动态创建列表

代码示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态创建列表</title>
</head>

<body>
  <div id="box">
    <p>111</p>
  </div>
  
  <script src="../js/common.js"></script>
  <script>
	  //  修改的时候呀  只修改这里就好了   所以做动态创建列表
    var data = [
      {"key":"电视机","qre":6544},
      {"key":"电视柜","qre":712319},
      {"key":"电视机55寸","qre":45073},
      {"key":"电视盒子","qre":154098},
      {"key":"电视机32寸","qre":31726},
      {"key":"电视机40寸","qre":7497},
     
    ];

    // 得到box
    var box = document.getElementById('box');
    // 创建ul
    // 在内存中创建了一个DOM对象
    var ul = document.createElement('ul');
    // 把ul对象，添加到box中
    box.appendChild(ul);

    // 遍历数组，生成li   将数组里面的内容写到遍历出来成li  写到box的ul里面
    var i = 0, len = data.length;
    for (; i < len; i++) {
      // 创建li
      // 在内存中创建一个孤立的DOM元素
      var li = document.createElement('li');
      // 把元素添加到ul中（添加到DOM树上）
      ul.appendChild(li);
      // 设置li中的内容
		// 这个js里面的我们自己写的方法
      setInnerText(li, data[i].key);

      // 鼠标放到li上高亮显示
      li.onmouseover = function () {
        this.style.backgroundColor = 'lightgray';
      }
      li.onmouseout = function () {
        this.style.backgroundColor = '';
      }
    }
	</script>
</body>
</html>

总结：

1 自定义属性
获取 element.getAttribute()
设置 element.setAttribute()
移除 element.removeAttribute()
2 操作样式
设置类样式class
设置行内样式style
3 节点属性
nodeName nodeType nodeValue
4 模拟DOM文档的结构
5 节点的层级
获取父子节点/元素
获取第一个/最后一个子节点/元素
获取上一个和下一个兄弟节点/元素
6 动态创建列表
document.createElement()
parentElement.appendChild()

注意：

1 . 我们js中创建数组的方法就是：

直接这样写就行了跟我们的java有些不同；

children = [];

2 . 创建对象的时候：

var html = new Node ({
nodeName: 'HTML'
});

var html = new Node();
html.nodeName = 'HTML';

这两段的作用应该是一样的就是给属性赋值的方式不一样而已；

但是呢 js中创建对象的时候的时候可以直接 var html = {}；而且他还可以直接html.name = 'HTML';

在没有构造函数的前提下但是呢我们的java就不能这样了因为js有动态性可以随意的加属性进去；

3 . 相对路径查找

./ 当前目录
../ 父级目录
/ 根目录

4 . 寻找元素节点的条件是：

box.childNodes[i].nodeType === 1

因为元素节点的节点类型是一

JavaScript_Tab栏切换_DOM文档结构_元素节点，属性节点，文本节点的解析 _动态创建列表_Unit_7;

Topic 1 ： tab的切换

Topic 2 ：模拟DOM文档的结构

Topic 3：元素节点，属性节点，文本节点的解析：

One ：父子节点：

Two ：首尾节点：

Treee ：兄弟节点

Topic 4 ：动态创建列表

猜你喜欢

JavaScript_Tab栏切换_DOM文档结构_元素节点，属性节点，文本节点的解析 _动态创建列表_Unit_7;

Topic 1 ： tab的切换

Topic 2 ： 模拟DOM文档的结构

Topic 3： 元素节点，属性节点，文本节点的解析 ：

One ： 父子节点 ：

Two ： 首尾节点 ：

Treee ： 兄弟节点

Topic 4 ： 动态创建列表

猜你喜欢

Topic 2 ：模拟DOM文档的结构

Topic 3：元素节点，属性节点，文本节点的解析：

One ：父子节点：

Two ：首尾节点：

Treee ：兄弟节点

Topic 4 ：动态创建列表