原生js基础操作

xiaoxiao2021-04-17  47

近来闲暇,将dom基础操作笔记整理了一下,不算完整,将持续更新希望对大家有所帮助

目录

      获取DOM

1、通过ID获取:document.getElementById

2、通过name获取:document.getElementsByName

3、通过class类名选择:document.getElementsByClassName

4、通过标签名选择:document.getElementsByTagName

5、通过css3选择器选择:document.querySelector、document.querySelectorAll

    节点指针 

1、第一个子节点和最后一个子节点 firstChild&lastChild 

2、获取子节点列表 childNodes&chidlren

3、获取前一个节点 previousSibling&previousElementSibling

4、获取下一个节点 nextSibling&nextElementSibling

5、获取父节点 parentNode

    操作节点 

1、创建并插入节点  createElement&appendChild&insertBefore

2、替换节点 replaceChild

3、复制节点 cloneNode

4、删除节点 removeChild

    操作属性 

1、获取属性 getAttribute

2、设置属性 setAttribute

3、删除属性 removeAttribute

    其他操作——持续更新 

1、获取或设置节点对象的内容 innerHTML&innerText


1、通过ID获取:document.getElementById

返回一个匹配特定ID的元素,由于元素的 ID 在大部分情况下要求是独一无二的,所以匹配到的将是一个对象,如果不慎命名了两个相同的ID,将获取第一个。

<div id="getId">获取ID</div> let getId = document.getElementById('getId') console.log('ID标签的内容 = ' + getId.innerText)

2、通过name获取:document.getElementsByName

匹配每一个带有指定name属性的元素,返回一个匹配的对象组成的数组对象,获取每一个匹配的对象需要循环

<div name="getName">第一个获取name</div> <div name="getName">第二个获取name</div> <div name="getName">第三个获取name</div> // 公共方法,下文将不展示 function forFun(item,tab) { for (let i of item) { console.log(tab+'标签的内容 = ' + i.innerText) } } let getName = document.getElementsByName('getName') forFun(getName,'name')

3、通过class类名选择:document.getElementsByClassName

匹配每一个指定类名的元素,返回一个由匹配元素组成的数组对象

<div class="getClass">第一个获取class</div> <div class="getClass">第二个获取class</div> <div class="getClass">第三个获取class</div> let getClass = document.getElementsByClassName('getClass') forFun(getClass,'class')

4、通过标签名选择:document.getElementsByTagName

匹配没有个指定标签名的元素,返回匹配对象的集合

<p>第一个获取Tagname</p> <p>第二个获取Tagname</p> <p>第三个获取Tagname</p> let getTagname = document.getElementsByTagName('p') forFun(getName,'tagname')

5、通过css3选择器选择:document.querySelector、document.querySelectorAll

(1)、document.querySelector匹配第一个指定选择器的元素

返回指定选择器的元素。

<div class="parent"> <span></span> <p>第一个css选择器</p> <p>第二个css选择器</p> <p>第三个css选择器</p> </div> var parent = document.getElementsByClassName('parent')[0]; var selector = parent.querySelector('span~p'); console.log(selector.innerText);

span~p:~是典型的css的匹配选择器,选择的是span之后所有同级的p标签

(2)、document.querySelectorAll,匹配指定选择器的所有元素

返回匹配的元素组成的数组对象

var selectorAll = document.querySelectorAll('span~p'); forFun(selectorAll,'selector');


 

 

1、第一个子节点和最后一个子节点 firstChild&lastChild 

如果js用这两个属性的话,需要慎重,并不是像我们理解或者css3选择器的那样获取节点,请看下面这个案例:

<div class="parent"> <p>第一个孩子</p> <p>中间的孩子</p> <p>最后的孩子</p> </div> <div class="parent2"><p>第一个孩子</p><p>中间的孩子</p><p>最后的孩子</p></div> let parent = document.getElementsByClassName('parent')[0] let parent2 = document.getElementsByClassName('parent2')[0] console.log('firstChild = ' , parent.firstChild) console.log('lastChild = ' , parent.lastChild) parent.firstChild.style.color = 'red'

如图,style并未起到作用并且报错了,firstChild元素也不并不是P标签,接下来看一下parent2的效果

let parent = document.getElementsByClassName('parent')[0] let parent2 = document.getElementsByClassName('parent2')[0] console.log('firstChild = ' , parent2.firstChild) console.log('lastChild = ' , parent2.lastChild) parent2.firstChild.style.color = 'red' parent2.lastChild.style.color = 'red'

由这两个案例可以看出,firstChild和lastChild是识别了空白节点;

既然这两个属性用起来很不方便,那就换一个扩展方法:firstElementChild&lastElementChild

<div class="parent"> <p>第一个孩子</p> <p>中间的孩子</p> <p>最后的孩子</p> </div> let parent = document.getElementsByClassName('parent')[0] parent.firstElementChild.style.color = 'red' parent.lastElementChild.style.color = 'red' console.log(parent.firstElementChild) console.log(parent.lastElementChild)

 

2、获取子节点列表 childNodes&chidlren

<div class="parent"> <p>第一个孩子</p> <p>中间的孩子</p> <p>最后的孩子</p> </div> let parent = document.getElementsByClassName('parent')[0] console.log('childNodes',parent.childNodes,'children',parent.children)

childNodes获取到的节点和firstchild的效果是一样的,所以获取子节点列表,推荐使用children 

返回由子节点组成的集合

 

3、获取前一个节点 previousSibling&previousElementSibling

<div class="parent"> <p class="childOne">第一个孩子</p> <p class="childTwo">中间的孩子</p> <p class="childThree">最后的孩子</p> </div> let childTwo = document.getElementsByClassName('childTwo')[0] console.log('previousSibling',childTwo.previousSibling) console.log('previousElementSibling',childTwo.previousElementSibling) childTwo.previousElementSibling.style.color = 'red'

返回上一个节点对象,推荐使用previousElementSibling

 

4、获取下一个节点 nextSibling&nextElementSibling

let childTwo = document.getElementsByClassName('childTwo')[0] console.log('nextSibling',childTwo.nextSibling) console.log('nextElementSibling',childTwo.nextElementSibling) childTwo.nextElementSibling.style.color = 'red'

返回下一个节点对象,推荐使用nextElementSibling

 

5、获取父节点 parentNode

<div class="parent"> <p class="childOne">第一个孩子</p> <p class="childTwo">中间的孩子</p> <p class="childThree">最后的孩子</p> </div>

 

let childTwo = document.getElementsByClassName('childTwo')[0] console.log('parentNode',childTwo.parentNode) childTwo.parentNode.style.background = 'red'


 

 

1、创建并插入节点  createElement&appendChild&insertBefore

(1)、向父节点创建并插入节点

body内写好一个父节点ul

<ul> </ul>

js内获取ul,再用createElement方法创建一个li节点,插入并设置li的内容

语法:document.createElement('标签名')

           父节点.appendChild(新创建的节点)

let ul = document.querySelector('ul'); //获取已有的ul let li = document.createElement('li'); //新创建一个li ul.appendChild(li); //将新创建的li插入已知节点ul内 let newLi = document.querySelector('li'); //获取到新创建的li newLi.innerText = '我是新创建的li'; //设置新的li的内容

接下来,用insertBerfore方法向新创建的li的上面再创建一个新的li,并设置内容

insertBefore方法需要两个参数,第一个参数是新创建的节点,第二个参数是已知的子节点

语法:父节点.insertBefore(新创建的节点,已知的子节点)

let ul = document.querySelector('ul'); //获取已有的ul let li = document.createElement('li'); //新创建一个li ul.appendChild(li); //将新创建的li插入已知节点ul内 let newLi = document.querySelector('li'); //获取到新创建的li newLi.innerText = '我是新创建的li'; //设置新的li的内容 let beforeLi = document.createElement('li'); //新创建一个li ul.insertBefore(beforeLi,newLi) let newBeforeLi = document.querySelector('li') newBeforeLi.innerText = '我是新创建的beforeli';

2、替换节点 replaceChild

语法:父节点.replaceChild(新创建的节点,将被替换的已知节点)

let btn = document.createElement('button'); //新创建一个button按钮 ul.replaceChild(btn,newBeforeLi);//将第一个li替换成新创建的button按钮 let newbtn = document.querySelector('button') newbtn.innerText = '按钮'

3、复制节点 cloneNode

语法:被克隆的元素.cloneNode('false/true') 

参数:true/false:是否复制子节点

<div class="all"> <div class="clone">被克隆的元素</div> </div> let all = document.querySelector('.all') //父节点 let clone = document.querySelector('.clone') //被克隆的子节点 let NewClone = clone.cloneNode(false) //克隆子节点(不复制内容) all.appendChild(NewClone) //将克隆的节点加到被添加的父节点内

cloneNode方法的属性为false,看一下效果

克隆之后的div并没有内容,下面将属性改为true看一下效果

连同内容一并复制并添加到父节点内

4、删除节点 removeChild

语法:父节点.removeChild(被删除的节点)

demo用点击删除看一下效果,先写一个按钮,再写一段被删除的元素,点击按钮将被删除的元素删除掉

<button class="click"> 点击删除 </button> <div class="box"> <div class="remove">被删除的元素</div> </div> let btnClock = document.querySelector('.click') let box = document.querySelector('.box') let remove = document.querySelector('.remove') btnClock.onclick = function(){ box.removeChild(remove) }

 


 

 

1、获取属性 getAttribute

语法:元素.getAttribute('属性名')

<img class="get" src="http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-006.jpg" alt=""> let get = document.querySelector('.get') let getSrc = get.getAttribute('src') console.log('图片地址 = '+getSrc)

这样  就获取到了图片的地址

2、设置属性 setAttribute

语法:元素.setAttribute('属性',属性值)

<button class="click">点击换图片</button> <img class="set" src="http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-006.jpg" alt=""> let set = document.querySelector('.set') let click = document.querySelector('.click') let newSrc = 'http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-012.jpg' click.onclick = function(){ set.setAttribute('src',newSrc)//获取元素的src属性 }

选择两张图片的地址,点击按钮,将图片地址改变为另一张地址

3、删除属性 removeAttribute

语法:元素.removeAttribute('属性')

<button class="click">点击删除图片地址</button> <img class="remove" src="http://img.ivsky.com/img/tupian/pre/201611/11/guaiwu_daxue_donghua-006.jpg" alt=""> let remove = document.querySelector('.remove') click.onclick = function(){ remove.removeAttribute('src') }

 


 

 

1、获取或设置节点对象的内容 innerHTML&innerText

    (1)、innerHTML

<div> <p>我是P标签的内容</p> </div> let div = document.querySelector('div') let divHTML = div.innerHTML console.log(divHTML)

获取的作用的比较少,常用的是将代码片段插入到元素内

点击设置或者替换某一个元素内的html内容

<button class="click">点击替换div的内容</button> <div> <p>我是P标签的内容</p> </div> let div = document.querySelector('div') let click = document.querySelector('.click') let html = '<p><i>我是修改后的代码片段</i></p>' click.onclick = function(){ div.innerHTML = html }

设置的html内容将以代码片段的形式被浏览器渲染并加载到dom结构上,下面看一下innerHTML和innerText的区别

(2)、innerText

let div = document.querySelector('div') let click = document.querySelector('.click') let html = '<p><i>我是修改后的代码片段</i></p>' click.onclick = function(){ div.innerText = html }

innerText是将内容以字符串的形式加载到节点中,标签内容并不会被渲染

2、更多操作将在下文继续更新,敬请关注

【未完待续...】

 

转载请注明原文地址: https://www.6miu.com/read-4819659.html

最新回复(0)