AngleSharp使用中にSystem.NullReferenceExceptionが発生する

Question

ニコ生APIの最新仕様
↑で書いているWindowsアプリケーションを作成しています。
HTML解析に「AngleSharp」ライブラリを使用しています。

フォームにリストボックスとボタンを配置して、ボタン押下時に
HTMLを取得、解析しています。（最終形では、HTML取得、解析処理は
タイマー処理とする予定）

UpdateList関数内の
var listItems = ul[0].QuerySelectorAll("li").Select(n => {
で一回目の制御は期待した通りにliタグを参照できますが、2回目から、
下層のa > ul > liタグを参照してしまい、titleタグがないため例外
(System.NullReferenceException: 'オブジェクト参照がオブジェクト
インスタンスに設定されていません。')が発生します。
どうしたら、番組のliタグを順に参照できますか？

ちなみに↓のコード例を参考にしています。
http://qiita.com/matarillo/items/a92e7efbfd2fdec62595

using AngleSharp.Dom.Html;
using AngleSharp.Parser.Html;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApp1 {
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }

        private async void button_Click(object sender, RoutedEventArgs e) {
            listBox.Items.Add(textBox.Text + "\naa\nbb");

            UpdateList("http://live.nicovideo.jp/recent?tab=common#/start_time/desc/1");
            UpdateList("http://live.nicovideo.jp/recent?tab=common#/start_time/desc/2");
        }

        private async void UpdateList(string urlstring) {
            var doc = default(IHtmlDocument);
            using (var client = new HttpClient())
            using (var stream = await client.GetStreamAsync(new Uri(urlstring))) {
                var parser = new HtmlParser();
                doc = await parser.ParseAsync(stream);
            }

            var ul = doc.GetElementById("onair_stream_list").GetElementsByTagName("ul");
            var listItems = ul[0].QuerySelectorAll("li").Select(n => {
                var title = n.Attributes["title"].Value;
                var status = n.QuerySelectorAll("a > ul > li");
                var audienceNum = status[0].QuerySelectorAll("span")[1].TextContent;
                var commentNum = status[1].QuerySelectorAll("span")[1].TextContent;
                if ((audienceNum != "--") && (int.Parse(audienceNum) >= 25) && (!IsExist(title))) {
                    
                    return new { Title = title, AudienceNum = audienceNum, CommentNum = commentNum };
                } else {
                    return new { Title = "@", AudienceNum = "@", CommentNum = "@" };
                }
            });

            listItems.ToList().ForEach(item => {
                if (item.Title != "@") {
                    listBox.Items.Add(item.Title + "\n" + item.AudienceNum + "\n" + item.CommentNum);
                }
            });
        }

        private bool IsExist(string title) {
            foreach (string i in listBox.Items) {
                if (i.Contains(title))
                    return true;
            }
            return false;
        }
    }
}

Answer 1

AngleSharpの使い方というかCSSセレクタの基礎知識ですね。
この類のライブラリはCSSセレクタを知っていれば初見でも使えるようになります。

提示いただいてるコードの場合

var ul = doc.GetElementById("onair_stream_list").GetElementsByTagName("ul");
var listItems = ul[0].QuerySelectorAll("li")

これの意味するところは
id=onair_stream_listの子孫で、最初に見つかったulの中にあるliタグ全て
です。ulの直下だろうが、孫だろうが、ひ孫だろうが、ulの中にあるliは全部取ってきます。

単純に階層指定で以下のようにします。

var listitems = doc.QuerySelectorAll("#onair_stream_list > ul.user-programs > li")
.Select( n => { ... } );

id=onair... の直下の<ul>かつclass=user-programsの直下の<li>の一覧を取得します。

Comments

[otaks]

すごい！期待する挙動をするようになりました。
セレクタで">"を使う必要があったんですね。
分かりやすい回答ありがとうございました。