JS标签选择器以及节点操作

您所在的位置:网站首页 prototypejs根据标签选取元素 JS标签选择器以及节点操作

JS标签选择器以及节点操作

2023-11-14 15:30| 来源: 网络整理| 查看: 265

JS的DOM开始当然是从选择器开始的,小编这边先做一个归类。

一、DOM选择器

document代表整个文档这边就省略他的开头了

1. getElementById( )     //显然是用作与获取id来获取标签(实战中不常用)

2.getElementByTagName( )     //通过标签类型来获取节点(常用)

3.getElementByClassName( )    //类名获取

4.querySelector( )       //内部放的是可以跟css选择器一样的格式但选取的是静态的(选取的那一刻之后更改了源头这个还是不会变)

二、节点操作

网页之中不可能所有的标签都是用选择器选出来的嘛那么小编这边在介绍一下节点操作,节点分为元素节点和节点,节点包含文本之类的这边也不做介绍,感兴趣可以去看一下。

元素节点:

1.parentElement( )     //返回引用对象父节点

2.children( )               // 返回子元素节点集

3.firstElementChild / lastElementChild       //返回 第一 \ 最后 子元素节点

4.nextElementSibling / previousElementSibling    //返回上一个 / 下一个兄弟元素节点

上述都是基于对象选择下面是一些基于文档的增查删改:

1.creatElement( )    //创建元素节点 

2.appendChild( )     //插入元素节点,插入顺序跟数组方法push一样,如果是操作页面中本身有的属性则相当于剪切

   insertBefore(a,b)      // 把a节点元素插到b前面

3.parent.removeChild()    //通过父级选取元素节点删除

   child.remove( )           //删除自身

4.parent.replaceChild(new , orgin)     //通过父级选择替换    

节点的一些属性:

1.nodeName      //节点名称

2.nodeVaule      //文本节点内容可读写

3.nodeType       //文本属性值(这边罗列几个常见的)

可以用作判断。

4. innerHTML     //往对象标签中添加内容,注意都是基于html文件的所以说在里面写的内容相当于直接加到html文档之中所以也 可以去写一些标签进去可以实现效果。

5. setAttribute(属性名,属性值)     // 我们通过这样的方法可以给标签加属性,可以是自建属性。

    getAttribute(属性名)        //获取属性值



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3