Java教程

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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!