jquery-dom

Let's create a simple application that displays a list of your upcoming exams,

让我们创建一个简单的应用程序，其中显示您即将参加的考试的列表，

index.html:

index.html：

    
        
        
        
        
        
                    
    
        
     
Exam Schedule
        
     
            
      
                
       
English
                
       
Maths
                
       
Physics
                
       
Chemistry
            
      
        
     
    
    
        

Output

输出量

Let's see how the DOM Tree would like for this application?

让我们看看该应用程序的DOM树如何？

<h2> is the sibling of the <div> which has a children <ul> which has 4 children, the <h4> each containing a child <li>. All these <h4> share a sibling relationship with each other. Let's see how to traverse the DOM using this DOM relationship?

<h2>是<div>的同级项，它有一个子级<ul> ，有四个子级，每个<h4>都包含一个子级<li> 。 所有这些<h4>彼此共享同级关系。 让我们看看如何使用这种DOM关系遍历DOM？

console.log($('h2')[0]);

Output

输出量

Exam Schedule

We can traverse from the title to our <ul> by calling the sibling method,

我们可以通过调用同级方法从标题移至<ul> ，

console.log($('h2').siblings()[0]);

Output

输出量

    
             ...    
    

The siblings() method gets us all the siblings of that element which is a single <div> element.

siblings()方法为我们获取该元素的所有同级元素，该元素是单个<div>元素。

console.log($('h2').siblings().children()[0]);

Output

输出量

    
             ...    
    

The children() method returns us all the children of that element. So now we're on the <ul> and we can further access the <h4> by calling the children method again.

children()方法将向我们返回该元素的所有子级。 因此，现在我们在<ul>上 ，可以通过再次调用children方法来进一步访问<h4> 。

console.log($('h2').siblings().children().children()[0]);

Output

输出量

English

Notice how we only get the first child element because this method only taverses down the DOM one level. If we target the <ul> directly we can get all the children using the children() method,

请注意，我们如何仅获取第一个子元素，因为此方法仅将DOM停在一个级别上。 如果我们直接定位<ul> ，我们可以使用children()方法获取所有子级，

console.log($('#subject-list').children());

Output:

输出：

k.fn.init(4) [h4.subject-name, h4.subject-name, h4.subject-name, h4.subject-name, prevObject: k.fn.init(1)]	0: h4.subject-name	1: h4.subject-name	2: h4.subject-name	3: h4.subject-name	length: 4	prevObject: k.fn.init [ul#subject-list.collection.center.#ffff8d]	__proto__: Object(0)

Let's say you're done with the Maths paper and want to remove this item from the list.

假设您已完成“数学”论文，并希望将其从列表中删除。

$('#subject-list').children()[1].remove();

Output

输出量

You can remove an element from the DOM using the remove() method.

您可以使用remove()方法从DOM中删除元素。

console.log($('#subject-list').parent());

Output

输出量

k.fn.init [div.container, prevObject: k.fn.init(1)]

Thus we can traverse upwards the DOM using the parent() method.

因此，我们可以使用parent()方法向上遍历DOM。

console.log($('#subject-list').children().first()[0]);    console.log($('#subject-list').children().last()[0]);

Output

输出量

English
    
Chemistry

We can also use some filter methods like first() and last() to get the first and last elements of that collection.

我们还可以使用一些过滤方法，例如first()和last()来获取该集合的第一个和最后一个元素。

翻译自:

jquery-dom