首页 > 编程语言> 文章详细

javascript核心dom学习2

2021-10-17 18:32:31 阅读：133 来源： 互联网

标签：dom 核心 javascript 节点 ul 全选 var children 属性

javascript核心dom

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();

标签：dom,核心,javascript,节点,ul,全选,var,children,属性
来源： https://blog.csdn.net/qq_51813155/article/details/120808155

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript核心dom学习2