分享编程~
 
JavaScript获取html中DOM节点Document对象

用 js 获取 html 中 DOM 节点 Document 对象 方法有很多,一时半会记不住,每次网上查找费事,于是做个记录方便查阅。

具体看以下内容


一、ID Dom

指定 ID 的第一个对象的引用。

示例:

<div id="test1">ID Dom</div>
<script>
var test1 = document.getElementById("test1");
    test1.onclick = function(){
        alert('ID');
    };
</script>

二、Class Dom

文档中所有指定类名的元素集合,说明这块是数组,通过节点索引获取第几个的class。

示例:

<div class="test2">Class Dom</div>
<script>
var test2 = document.getElementsByClassName('test2');
    test2[0].onclick = function(){
	abc('Class');
    };
</script>

三、Name Dom

可返回带有指定名称的对象的集合,也是数组,通过节点索引获取第几个元素。

示例:

<div name="test3">Name Dom</div>
<script>
var test3 = document.getElementsByName('test3');
    test3[0].onclick = function(){
        abc('Name');
    };
</script>

四、TagName Dom

返回带有指定标签名的对象的集合,也是数组,通过节点索引获取第几个元素。

<div>TagName Dom</div>
<script>
var test4 = document.getElementsByTagName('div');
    test4[3].onclick = function(){
        abc('TagName');
    };
</script>

五、指定选择器 DOM

返回文档中匹配指定 CSS 选择器的一个元素,querySelector()方法仅仅返回匹配指定选择器的第一个元素

格式:标签/#id/.class/标签.class/标签#id/标签[属性])

1、获取文档中 class="example" 的第一个 <p> 元素

document.querySelector("p.example");

2、获取文档中有 "target" 属性的第一个 <a> 元素

document.querySelector("a[target]");

3、多个选择器时,作用到实际文档流第一个元素上

document.querySelector("span, a");

如果span标签在前作用到span上,如果a标签在span前作用到a上。

示例:

<div class="test5">指定选择器 Dom 1</div>
<div class="test5">指定选择器 Dom 2</div>
<script>
var test6 = document.querySelectorAll(".test5");
    test6[1].onclick = function(){
        abc('指定选择器 Dom 2');
    };
</script>

六、body DOM

直接获取body

var test7 = document.body;
    test7.onclick = function(){
        abc('body Dom');
    };


上一篇:用Photoshop制作墨水轮廓方法下一篇:H5页面监听浏览器关闭、刷新、跳转时提示之onbeforeunload和onunload事件
赞(0) 踩(0)
赏金
微 信
赏金
支付宝
您说多少就多少,您的支持是我最大的动力