频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
javascriptDOM基础和扩展
2017-06-19 09:35:39      个评论    来源:  
收藏   我要投稿

今天总结一些js 的DOM的一些知识。很简单,也很基础,但是我认为很重要。

一、前言

我想很多人在学js时,都会经常用 getElementById() 和 getElementsByTagName() 但是今天我主要不是讲这两个,而是讲一下其他的Dom 操作的方法。

二、querSelector()方法 和 querySelectorAll() 方法。

这两个方法它可以去解析css选择符。我们可以利用这两个方法,通过css选择符去查找我们想要的元素。(目前主流浏览器都支持)

1.querySelector() 方法获取所选元素的第一个元素

<ul>
    <li class="one">
        <p>我是p</p>
    </li>
    <li class="two">
        <a href="">我是a标签</a>
    </li>
    <li class="other">我是第三个Li</li>
    <li class="other">我是第四个Li</li>
    <li class="other">我是第五个Li</li>
</ul>
 var li = document.querySelector("ul>li");
 console.log(li) // 获取类为 one 的li元素

2.querySelectorAll() 方法接受的参数和querySelector()一样,只不过它返回来的是所有被选择的元素的集合(类数组)

例如:

var li = document.querySelectorAll("ul>li");
 console.log(li) // ul 元素下边的所有li元素

如果这两个元素传入的选择符不被css选择符所支持,哪儿将会报错。

 var li = document.getElementById("ul").querySelectorAll("li");
console.log(li) // 结果会返回 id 为ul 下边的所用 li 元素。

三、元素的遍历

对于元素间的空格,Ie9及之前版本不会返回文本节点,但是其他所有浏览器都会返回文本节点,为了弥补这一差异,而又保持DOM规范不变,w3c 又新定义了一株属性。(IE9+)

childElementCount 返回子元素(不包括文本节点和注释)的个数

firstElementChild 指向第一个子元素; firstChild 的元素版

lastElementChild 指向最后一个子元素; lastChild的元素版

previousElementSibling 指向前一个同辈元素;previousSibling 的元素版

nextElementSibling 指向后一个同辈元素; nextSibling 的元素版

DOM节点的增删改查:

1.appendChild() 向列表childList 尾部添加节点
2.insertBefore( newNode,position) 向列表指定位置插入节点(newNode新节点,position 插入的位置)
3.removeChild(,position) 删除列表中指定位置的节点
4.replaceChild( newNode,position)替换列表指定位置的节点
5.cloneChild() 克隆dom 节点
6. createElement() 创建节点

DOM操作节点中的文本:

1.appendData(text) 将text添加到节点的末尾

2.deleteData(offset,count) 从offset 指定的位置开始删除count个字符

3.insertData(offset,text) 在offset指定的位置插入text

4.replaceData(offest,count,text) 用text替换从offset指定的位置开始到offset+count为止处的文本

5.splitText(offset)从offset指定的位置将当前文本节点分成两个文本节点

6.substringData(offset,count) 提取从coffse 指定的位置开始都offset+count为止的字符串。

7.createTextNode() 创建文本节点

四、HTML5 新增的部分Dom操作

1.getElementsByClassName() 方法 (ie9+)
该方法接收一个参数,即一个包含一或多个类名的字符串,返回的都是带有nodeList 的集合。例如:
还是上面的HTML

 var dom = document.getElementsByClassName("other");
 console.log(dom) // 是一个集合,包含类名为other的所有元素

同样我们也可以指定获取元素的范围

var dom = document.getElementById(""ul).getElementsByClassName("two");

 console.log(dom) // 获取id为ul元素下边的所有类名为two的元素

注意:使用这个元素可以方便的为带有某些类的元素添加事件处理程序,从而不必局限于使用id或标签名。不过别忘了,因为它返回的对象是NodeList ,所以使用这个方法以及其他返回NodeList 的DOM方法都具有相同的性能问题。

2. classlist 属性 (目前firefox3.6+ 和 Chrome)
该属性可以很方便的添加,删除,更改元素的类名,该元素有一下几种方法;
① add(value) 将给定的字符串添加到列表中,如果值已经存在,就不添加了

② contains(value) 表示列表中是否存在给定的值,如果存在则返回ture,否则返回false

③ remove(value) 表示从列表中删除给定的字符串

④toggle(value) 如果列表中已经存在给定的值,删除它;如果列表中没有给定的值,添加它。

这里我只提供一个简单的例子:
css:

    .add{ display:none}

html

<ul id="ul">
    <li class="one">
        <button>我是p</button>
    </li>
    <li class="two">
    <a href="">我是a标签</a>
    </li>
    <li class="other">我是第三个Li</li>
    <li class="other">我是第四个Li</li>
    <li class="other">我是第五个Li</li>
</ul>

js

var dom = document.querySelector(".two");
var bol = true;
document.querySelector(".one").onclick = function(){
   dom.classList.toggle("add");
   console.log(dom)
}
点击复制链接 与好友分享!回本站首页
上一篇:JavaScript常用的基础语法和技巧
下一篇:用JavaScript改变table的背景色
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 |

版权所有: 88bifa.com--致力于做实用的IT技术学习网站