javascript核心dom学习2

本文主要是介绍javascript核心dom学习2，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

javascript核心dom

• • 1.表单全选取消全选:
  • 效果图：
  • 2.自定义属性
  • 效果
  • 3.为什么学习节点？
  • 效果图：

1.表单全选取消全选:

掌握

input type=" checkbox "按钮学习

选中一个 checkbox(复选框) 后，再次点击它，即可取消选中
选中一个 radio(单选按钮) 后，再次点击它，不能取消选中

value.checked:被选中之后，值为true,没选中时值为false;

利用checked来达到全选，和取消全选的算法
一点击总按钮，使其他的按钮也选中，使其他的按钮的值可总按钮值一样

<input type="checkbox" class="ww">
<input type="checkbox" class="ww">
<input type="checkbox" class="ww">

<script>
var input=document.getElementsByClassName('ww');

console.dir(input);



input[0].οnclick=function(){

for(var i=1;i<3;i++)
{
input[i].checked=this.checked;


}




}


</script>

效果图：

点击第一个按钮，就达到全选

2.自定义属性

自己添加的属性；
class=“we” dom=“111” 就是属性

获取属性-element.getAttribute(“属性名称”)。
js设置属性-element.setAttribute(“属性名称”，“属性值”);

Attribute：属性
移除属性值removeAttribute(属性名称);

<div class="we" dom="111"></div>


<script>
var we=document.querySelector('div');




console.log(we.getAttribute('dom'));
console.log(we.getAttribute('class'));
we.setAttribute('ddd',2);
</script>

**

效果

**

3.为什么学习节点？

定义：获取元素的节点
通过节点不用一个个元素获取，才能使用,如父节点获取了,
子节点就直接使用，不用获取;子节点获取了，父节点也可以不获取直接使用

这里指元素节点

元素父节点 parentNode
离元素最近的父级节点（亲爸爸）
元素子节点：children
ww[0].parentNode ww[0]的 父节点
ul.children[0] ul的第一个孩子(孩子可以很多，父母只有一个)

创建节点，添加节点：语法
var li=document.createElement(‘li’); //创建html标签 div/ul/li…
ul.appendChild(li); //
再把这个标签元素放在某一个元素的里面
且是某一个元素，最后的一个孩子
append： 追加;(在文章后面)附加，增补;

node.insertBefore(第一个节点,第二个节点);
第一个节点放在第二个节点的前面；
移动第一个节点，到离第二个节点最前面
ul.insertBefore(ul.children[0],ul.children[3]); //
ul.children[0]移动到ul.children[3]的最前面

<ul>
<li class="ww">1</li>
<li>2</li>
<li>3</li>
<li>4</li>




</ul>
<script>

var ul=document.querySelector('ul');
var ww=document.getElementsByClassName('ww');

var lie=document.createElement('li');


ul.appendChild(lie);
ul.insertBefore(ul.children[0],ul.children[4]);






</script>

效果图：

node.removeChild();

node.cloneNode();

这篇关于javascript核心dom学习2的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！