美文网首页javascript
javascript第十讲:Dom中的查找

javascript第十讲:Dom中的查找

作者: 乔乔_老师 | 来源:发表于2018-05-31 22:56 被阅读0次

Dom中的查找

Document Object Model 文档对象模型
专门操作网页内容的API

                  Dom可进行的操作:
                   查找 修改 添加 删除

1)查找
### A.元素间关系查找

父子关系:

                                    parentElement; 查找一个元素的父元素
                                    children;查找一个元素的所有孩子
                                    firstElementChild;查找第一个孩子
                                    lastElementChild;查找最后一个孩子

兄弟关系:

                                     previousElementSibling  前一个兄弟元素
                                     nextElementSibling      下一个兄弟元素

B.使用HTML元素查找

1.按id查找:

    var ele=document.getElementById('id');                            

特点:只能找到一个
如果没找到返回null

2.按class查找:

var ele=document.getElementsByClassName('class');

可以找到多个,返回一个动态集合
如果没找到,返回空集合

3.按标签名查找:

var ele=document.getElementByTagName('标签名');

可以找到多个,返回一个动态集合
如果没找到,返回空集合

4.按name属性查找

var ele=document.getElementByName('name');

C.使用选择器查找

 1.var ele=document.querySelector('选择器');

特点:只能找到一个,如果找不到,返回null

2.var ele=document.querySelectorAll('选择器');

特点:查找多个符合选择器要求的函数,如果没找到,返回[]集合

相关文章

网友评论

    本文标题:javascript第十讲:Dom中的查找

    本文链接:https://www.haomeiwen.com/subject/ywicsftx.html