目录

• 一、获取当前元素的同胞兄弟元素
• • 1. nextElementSibling
  • 2. previousElementSibling
  • 3. nextSibling
  • 4. previousSibling
  • 5. 节点的类型--------符号、文本、元素
• 二、获取当前元素的子元素或子节点
• • 1. childElementCount-------获取子元素的个数
  • 2. children----获取的是子元素的集合
  • • 对子元素进行遍历
  • 3. childNodes------获取元素的子节点集合
  • • 对子节点集合进行遍历
  • 4. 如何区分节点（文本、符号和元素）
  • 5. 输出节点值的方法
• 三、获取元素的父元素或父节点
• • 1. 获取元素的父元素
  • 2. 获取元素的父节点
• 四、字符串大小写转化
• 五、数字转化成千分制的格式（钱的格式）
• 六、获取最后一个子节点和第一个子节点
• 七、节点克隆
• • 1. 克隆
  • 2. 克隆之后追加到body中
  • 3. 克隆的参数

一、获取当前元素的同胞兄弟元素

1. nextElementSibling

• 获取当前元素下一个元素

2. previousElementSibling

• 获取当前元素前一个元素

<button>按钮1</button>
<button>按钮2</button>
<button id="btn">按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>console.log(btn.nextElementSibling);console.log(btn.previousElementSibling);
</script>

3. nextSibling

• 获取的是下一个节点（节点包括符号、文本、元素）

4. previousSibling

• 获取的是上一个节点

5. 节点的类型--------符号、文本、元素

• 若是按钮3与按钮4之间是回车，则输出的是#text

<button>按钮1</button>
<button>按钮2</button>
<button id="btn">按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>console.log(btn.nextSibling);
</script>

• 若是按钮3与按钮4之间没有任何东西，则输出的是按钮4

<button>按钮1</button>
<button>按钮2</button>
<button id="btn">按钮3</button><button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<script>console.log(btn.nextSibling);
</script>

二、获取当前元素的子元素或子节点

1. childElementCount-------获取子元素的个数

<ul id="menu"><li>蔬菜</li><li>水果</li>
</ul>
<script>console.log(menu.childElementCount);console.log(menu.children);console.log(menu.children[0]);console.log(menu.children[1]);
</script>

2. children----获取的是子元素的集合

• 要转化成单个对象进行使用

<ul id="menu"><li>蔬菜</li><li>水果</li>
</ul>
<script>console.log(menu.children);console.log(menu.children[0]);console.log(menu.children[1]);
</script>

对子元素进行遍历

   for(var i = 0;i<menu.length;i++){console.log(menu.children[i]);}

3. childNodes------获取元素的子节点集合

<ul id="menu"><li>蔬菜</li><li>水果</li>
</ul>
<script>console.log(menu.childNodes);
</script>

• text就是回车

对子节点集合进行遍历

   for(var i = 0;menu.childNodes.length;i++){console.log(menu.childNodes[i]);}

4. 如何区分节点（文本、符号和元素）

• nodeName--------节点名称
• nodeType----------节点类型
• toLowerCase()------转化为小写
• toUpperCase()------转化为大写

for(var i = 0;i<menu.childNodes.length;i++)
{console.log(menu.childNodes[i].nodeName.toLowerCase() == "li");
}

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

• 元素的节点类型是1，符号、文本的节点类型是3
• nodeValue------元素的节点值（根据节点的类型设置或返回节点的值）
• 元素是没有节点值的

for(var i = 0;i<menu.childNodes.length;i++)
{console.log(menu.childNodes[i].nodeValue);
}

5. 输出节点值的方法

for(var i = 0;i<menu.childNodes.length;i++)
{if(menu.childNodes[i].nodeName.toLowerCase() == "li"){//输出带字符串文本console.log(menu.childNodes[i].childNodes[0]);}
}
for(var i = 0;i<menu.childNodes.length;i++)
{if(menu.childNodes[i].nodeName.toLowerCase() == "li"){//输出节点值console.log(menu.childNodes[i].childNodes[0].nodeValue);}
}

三、获取元素的父元素或父节点

1. 获取元素的父元素

parentElement属性

console.log(info.parentElement);

2. 获取元素的父节点

• parentElement属性

console.log(info.parentNode);

四、字符串大小写转化

• toUpperCase()------转化为大写
• toLocaleUpperCase()-----根据本地主机的语言环境把字符串转化为大写
• toLowerCase()------转化为小写
• toLocaleLowerCase()-----根据本地主机的语言环境把字符串转化为小写

五、数字转化成千分制的格式（钱的格式）

• toLocaleString()方法可以根据本地时间（按千分位走的）把Date对象转换为字符串，并返回结果。
• 类似toString()

var a = 100000000;
console.log(a.toLocaleString());

六、获取最后一个子节点和第一个子节点

• firstChild----------------获取元素里面的第一个子节点
• firstElementChild-----获取第一个子元素
• lastChild----------------获取元素的最后一个子节点
• lastElementChild-----获取最后一个元素

console.log(menu.firstChild);
console.log(menu.firstElementChild);
console.log(menu.lastChild);
console.log(menu.lastElementChild);

七、节点克隆

1. 克隆

console.log(ipt.cloneNode());

2. 克隆之后追加到body中

document.body.appendChild(ipt.cloneNode());

3. 克隆的参数

• node.cloneNode(deep);
• deep是bolean类型的值，该方法将复制并返回调用它的节点的副本，如果传递给它的参数是true，它还将递归复制当前节点的所有子孙节点，否则，它只复制当前节点。