JS：通过方法获取节点，元素属性等

为什么学习获取元素的方法和属性？

　　操作页面

 

 

方法：

1. document.getElementById('写id名不是id选择器')          获取id元素　　速度最快    （标签对象 挥着类）
2. document.getElementsByClassName(‘写类名不是类选择器’)           获取类名元素      （类数组，装的元素）
3. document.getElementsByTagName(‘写标签名不是标签选择器’)          获取标签名元素        （类数组，装的元素）
4. document.getElementsByName(‘例：input标签的name属性的值’)         获取元素名　　   （类数组，装的元素）
5. document.querySelector(例：#box  .box)　　选择第一个选择器
6. document.querySelectorAll(例：#box  .box)       选择全部的选择器
7. (xx代表选择器的名称)
8. parentElement　　查找父元素
9. xx.parentNode　　查找父节点
10. xx.children　　查找子元素
11. xx.childNodes          查找子节点
12. xx.nextElementSibling        查找下一个兄弟元素
13. xx.nextSibling       查找下一个兄弟节点
14. xx.previousElementSibling         查找上一个兄弟元素
15. xx.previousSibling         查找上一个兄弟节点
16. xx.firstElementChild | xx.children[0]       查找第一个子元素
17. xx.firstChild |  xx.childNodes[0]       查找第一个子节点
18. xx.lastElementChild       查找最后一个子元素
19. xx.lastChild       查找最后一个子节点
20. xx.indexof()     (如下)

 

获取这个元素是同胞中的第几个

　　　　　　 Object.prototype.indexof=function(){
                var arr=this.parentElement.children
                for(let i=0;i<arr.length;i++){
                    if(arr[i]===this){
                        return i
                    }
                }                
            }
            var box = document.querySelector("#box6")
            console.log(box.indexof1())

 

显示页面中的属性：

1. xx.innerHTML
2. xx.innerText
3. xx.value
4. a.src
5. img.herf
6. xx.style.(css)