JavaScript

JavaScript操作DOM元素

console.dir(元素对象)打印元素对象

1.获取页面元素

1.根据ID获取元素

<a id="one"></a>
#通过id获取元素对象,返回的是一个对象
let element = document.getElementById('id');

2.根据标签获取元素

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

#通过标签获取元素对象,返回的是一个伪数组
let lis= document.getElementByTagName('li');

#通过索引值调用
console.log(lis[0]);

3.通过父元素获取子元素

<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>

#通过标签获取元素对象,返回的是一个伪数组
let ols= document.getElementByTagName('ol');

#通过父元素获取子元素
console.log(ol[0].getElementByTagName('li'));
<ul id="ol">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

#通过ID获取元素
let ol=document.getElementById('ol');

#从父元素中获取子元素
console.log(ol[0].getElementByTagName('li'));

4.通过类名获取元素

<div id="box">盒子</div>

#通过类名获取元素
let boxs = document.getElementByClassName('box');
console.log(boxs)

5.根据指定选择器返回元素对象

<div class="box">盒子1</div>
<div class="box">盒子2</div>

<ul id="nav" >
  <li></li>
<li></li>
  </ul>

#通过类选择器
let firstBox = document.querySelector('.box');
console.log(firstBox);

#通过ID选择器
let nav = document.querySelector('#nav');
console.log(nav);


#通过标签选择器
let lis = document.querySelector('li');
console.log(lis);

#querySelectorAll()返回指定选择器的所有元素对象集合
let allBox = document.querySelectorAll('.box');
console.log(allBox);

let lis = document.querySelectorAll('li');
console.log(lis);

2.获取特殊元素body、HTML

#获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);

#获取HTML元素
var htmlEle = document.documentElement;
console.log(htmlEle);

3.事件基础

<button id="btn">哈哈</button>

#事件源
var btn =document.getElementById('btn');

#事件类型,如鼠标点击、经过
btn.onclick=function(){
  alert('我被点击了');
}

4.操作元素

1.改变元素内容

<button>显示当前系统时间</button>
<div>时间</div>

#点击按钮,div里面的文字发生变化

#1.获取元素
var btn = document.querySelctor('button');
var div = document.querySelctor('div');

#2.注册事件
btn.onclick = function(){
  div.innerText = '2020-8-9';
}

5.innerText和innerHTML的区别

<div></div>

#1,innerText不识别HTML标签
var div = document.querySelector('div');
div.innerText ='<strong>哈哈哈:</strong> 111';

#2.innerHTML识别html标签
var div = document.querySelector('div');
div.innerHTML	 ='<strong>哈哈哈:</strong> 111';

6.操作表单的属性值

<button>按钮</button>
<input type="text" value="输入内容">
  
#1.获取元素
var btn =document.querySelector('button');
var input = document.querySelector('input');

#2.注册事件
btn.onclick = function(){
  input.value = '我被修改了';
  
  //设置点击之后按钮禁用
  btn.disabled = true;
  //或者
   this.disabled = true;
}

7.样式属性操作

1.elemnt.style 行内样式操作

<div></div>

#1.获取元素
var div =document.querySelector('div');


#2.注册事件
div.onclick = function(){

  div.style.width = '300px';
  //获取
  this.style.width = '300px';
}

2.elemnt.className 类名样式操作

.change{
  color:#fff;
  font-size:20px;
}

<div></div>

#1.获取元素
var div =document.querySelector('div');


#2.注册事件
div.onclick = function(){
  //修改当前元素的类名为change
	div.className = 'change';
}

8.操作自定义属性值

1.获取自定义属性值

<div id="demo" HaHa="1"></div>

#获取自定义属性的值
console.log(div.getAttribute('HaHa'));

#获取元素的属性值
console.log(div.getAttribute('id'));

2.修改自定义属性的值

<div id="demo" HaHa="1" class="nav"></div>

#非自定义属性 element.属性= ‘值’
div.id='test';
div.className = 'navs';


#修改自定义属性的值
#element.setAttribute('属性','值');
div.setAttribute('HaHa',2);

3.移除属性

<div id="demo" HaHa="1"></div>

#修改自定义属性的值
#element.removeAttribute('属性');
div.removeAttribute('HaHa');

9.H5操作自定义属性

<div data-index="2" data-list-name="andy"></div>

#1
console.log(div.getAttribute('data-index'));
#h5操作,dataset是一个集合里面存放看所有的自定义属性
console.log(div.dataset.index);
console.log(div.dataset['index']);
#属性名长的要驼峰命名获取
console.log(div.dataset.listName);
console.log(div.dataset['listName']);

10.节点操作

1.父节点操作

<div class="box">
  <span class="yuan">a</span>
</div>


var yuan = document.querySelector(".yuan");
#通过子节点获取父节点,获取的是最近的父节点
console.log(yuan.parentNode);

2.子节点操作

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

var ul = document.querySelector('ul');
#通过父节点获取子节点,不推荐使用
console.log(ul.childNodes);

#children推荐使用
console.log(ul.children);

3.节点操作第一个子元素和最后一个子元素

<ol>
<li></li>  
<li></li>  
<li></li>  
</ol>

var ol = document.querySelector('ol');

#获取第一个子元素节点,兼容性问题
console.log(ol.firstElementChild);
#获取最后一个子元素节点,兼容性问题
console.log(ol.lastElementChild);

#没兼容性问题的写法
#获取第一个子元素节点
console.log(ol.children[0]);
#获取最后一个子元素节点,
console.log(ol.children[ol.children.length-1]);

4.兄弟节点操作

<div></div>
<span></span>

var div = document.querySelector('div');

#获取下一个兄弟元素节点,兼容性问题
console.log(div.nextElementSibling);

#获取上一个兄弟元素节点,兼容性问题
console.log(div.previousElementSibling);

5.动态创建节点

<ul></ul>

#创建子级节点
var li = document.createElement('li');

#在父级节点中添加子节点,默认添加都末尾
var ul = document.querySelector('ul');
ul.appendChild(li);

#在父级节点中添加子节点,指定位置
#node.insertBefore(child,指定元素);
var li2 = document.createElement('li');
ul.insertBefore(li2.ul.children[0]);

6.删除节点

<button>删除</button> 

<ul>
<li>1</li>  
<li>2</li>  
<li>3</li> 
 </ul>

#获取元素
var ul =document.querySelector('ul');

#删除元素 node.removeChild(child)
ul.removeChild(ul.children[0]);

#点击删除依次删除
var btn = document.querySelector('button');

btn.onclick = function(){
  ul.removeChild(ul.children[0]);
}

7.复制节点

<ul>
<li>1</li>  
<li>2</li>  
<li>3</li> 
</ul>


#获取元素
var ul =document.querySelector('ul');
#进行复制,cloneNode()括号为空或者是false为浅拷贝,只复制标签不复制内容
#进行复制,cloneNode()括号为true为深拷贝,复制标签并复制内容
var cloneli = ul.children[0]).cloneNode(true);
#复制后添加到指定位置
ul.appendChild(cloneli);

11.注册事件监听事件

<button></button>
<button></button>

var btn = document.querySelector('button');
#addEventListener
btn[1].addEventListener('click',function(){
  alert("我被点击了");
})

12.删除事件

<div>1</div>
<div>2</div>
<div>3</div>

var divs = document.querySelector('div');
#传统方式
divs[0].onclick = function(){
  alert(11);
  //传统方式删除事件
  divs[0].onclick = null;
}

#removeEventListener  删除事件
divs[0].addEventListener('click',fn);
funciton fn(){
  alert(22);
  divs[1].removeEventListener('click',fn);
}

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!