js原生API----查找dom

一、祖先接口Node,及他的扩展接口EventTarget

Node是一个接口，许多DOM类型从这个接口继承，并允许类似地处理（或测试）这些各种类型。

以下接口都从Node继承其方法和属性：

Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference

在方法和属性不相关的特定情况下，这些接口可能返回null。它们可能会抛出异常 - 例如，当将子节点添加到没有子节点的节点类型时。

EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。

Element，document 和 window 是最常见的事件目标，但是其他对象也可以是事件目标，比如XMLHttpRequest，AudioNode，AudioContext 等等。

许多事件目标（包括元素，文档和 window）还支持通过 on... 属性和属性设置事件处理程序。

二、document接口

Document接口表示在浏览器中加载的任何网页，并作为到网页内容的入口点，这是 DOM 树。 DOM树包括诸如<body> 和 <table>之类的元素，其他等等。其也为文档（document）提供了全局性的函数，例如获取页面的URL、在文档中创建新的 element 的函数。它为文档提供全局的函数，像如何获取页面的URL和在文档中创建新的元素。

Document 接口也继承自 Node 及 EventTarget 接口。

https://developer.mozilla.org/zh-CN/docs/Web/API/Document

三、查找dom API

三种返回形式：HTML，HTMLcollection，HTMLlist
3.1 HTML

document.getElementById  返回html

document.querySelector   返回html

3.2 HTMLcollection

HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。

document.getElementsByClassName  返回HTMLcollection

document.getElementsByTagName    返回HTMLcollection

document.forms等属性

Document (images, applets, links, forms, anchors)
form (elements)
map (areas)
select (options)
table (rows, tBodies)
tableSection (rows)
row (cells)　　　　　　　　

返回HTMLcollection

document.getElementsByName    　　返回HTMLlist

document.querySelectorAll　　　　　返回HTMLlist

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style>

    div{border: 1px solid #000;}

</style>

<body>

    <div id="js_id" class="js-class" name='js-name'>

        <div>123</div>

    </div>

    <form action="" name="form2" ></form>

</body>

    <script>

    // https://developer.mozilla.org/zh-CN/docs/Web/API/Document

    // https://developer.mozilla.org/zh-CN/docs/Web/API/Element

    /*

    Document接口表示在浏览器中加载的任何网页，并作为到网页内容的入口点，这是 DOM 树。

     DOM树包括诸如<body> 和 <table>之类的元素，其他等等。其也为文档（document）提供了全局性的函数，例如获取页面的URL、在文档中创建新的 element 的函数。它为文档提供全局的函数，像如何获取页面的URL和在文档中创建新的元素。

     */

    // 1、老ie会获得 name

    // 2、返回 第一个的html

    var js_id=document.getElementById('js_id');

    console.log(js_id)

    // 类似于jquery $, 但只返回第一个选择器匹配的html   IE8+

    var js_selector=document.querySelector('#js_id');

    console.log(js_selector)

    // HTMLCollection是一个特殊的NodeList，表示包含了若干元素（元素顺序为文档流中的顺序）的通用集合是element的集合，它是实时更新的

    // 返回一个集合 HTMLcollection    IE9+

    var js_class=document.getElementsByClassName('js-class');

    console.log(js_class)

    var js_div=document.getElementsByTagName('div')

    console.log(js_div)

    // dovument.forms 是属性

    var js_forms=document.forms

    console.log(js_forms) 

    // NodeList 对象是一个节点的集合，

    // 返回noteList                   是node的集合

    var js_name=document.getElementsByName('js-name')

    console.log(js_name)

    var js_selector_all=document.querySelectorAll('.js-class')

    console.log(js_selector_all) 

    // 集合下 寻找  document 是整个html文档  -> html下才能使用 element方法API

    console.log(js_id.querySelector('div'))        //<div>123</div>

    // console.log(js_class.querySelector('div'))  error

    // console.log(js_name.querySelector('div'))   error

    </script>

</html>

http://blog.csdn.net/hj7jay/article/details/53389522

https://developer.mozilla.org/zh-CN/docs/Web/API

四、在集合内查找dom

1、HTMLcollection下可以使用，通过编号或名称索引一个 HTMLCollection 对象，也可以调用 item() 方法和 namedItem() 方法。

属性 length	只读属性，返回指示列表长度的整数（即集合中的元素数）。
[]	返回集合中指定index位置的元素,name 属性或 id 属性具有指定值的元素（节点）
item()	返回集合中指定位置的元素（节点）。
namedItem()	返回集合中 name 属性或 id 属性具有指定值的元素（节点）。

<body>

    <form action="" name="form_name">

        <input type="text" name="text">

        <select name="sel" id="sel">

            <option value="1">1</option>

            <option value="2">3</option>

        </select>

    </form>

</body>

<script>

    // 二级查找在集合内查找 dom

    // HTMLcollection  [],item,namedItem

    var js_forms=document.forms;

　　　　console.log(js_forms[0],js_forms['form_name'],js_forms['form1'])

　　　　console.log(js_forms.item(0),js_forms.namedItem('form_name'))

//得到 相同的html

</script>

2、HTMLcollection下可以使用 ,通过编号一个 HTMLCollection 对象，也可以调用 item() 方法,属性 length

// nodeList

    var nodeList=document.querySelectorAll('#form1')

    console.log(nodeList[0],nodeList.item(0))

// 配合for 遍历dom

    var js_set=document.getElementById('sel')

    var x=js_set.childNodes;

    for (i=0;i<x.length;i++)

      {

           document.write(x.item(i).nodeName+x.item(i).nodeType)

        　　document.write("<br />")

      }

好好学习，天天向上！！

巴特西

js原生API----查找dom

一、祖先接口Node,及他的扩展接口EventTarget

二、document接口

三、查找dom API

四、在集合内查找dom

最新文章

热门文章