尝试在javascript中选择导航ulli

尝试在javascript中选择导航ulli,javascript,html,css,Javascript,Html,Css,我尝试了很多选择,但这是我目前为止所做的,它不起作用 document.querySelectorAll('ul li').querySelectorAll('ul li').style.background = color; document.getElementsByTagName("NAV").getElementsByTagName("UL").getElementsByTagName("LI").getElementsByTagName("UL").getElementsByTagN

我尝试了很多选择,但这是我目前为止所做的,它不起作用

document.querySelectorAll('ul li').querySelectorAll('ul li').style.background = color;

document.getElementsByTagName("NAV").getElementsByTagName("UL").getElementsByTagName("LI").getElementsByTagName("UL").getElementsByTagName("LI").style.background = color;
我的html

<nav>
    <ul id = "mainNav">
        <li><center>
            <img id = "logo" src = "https://31.media.tumblr.com/cfc2c43f7e34ec3fcb60405fa5d4f5a5/tumblr_n9nvpjtNNW1tgkx81o1_1280.png"></center>
        </li>
        <li id = "search">

            <form name = "searchField">
                <img src = "http://31.media.tumblr.com/7732f8901e9c94cb94aa5cff9e11b2ae/tumblr_n8zm5cD1SL1tgkx81o1_1280.png"><input name = "search" type = "text" placeHolder = "" id = "search">
            </form>

        </li>
        <li><a href ="#">
            <img src = "https://38.media.tumblr.com/f319cbdb3a9bd4041fd2c6056827794b/tumblr_n9lpsfYFOB1tgkx81o3_1280.png" alt = "img/home.png">HOME</a>
        </li>
        <li><a href ="#">
            <img src = "https://31.media.tumblr.com/1dc400960f59fca2f738ceab516d24f4/tumblr_n9lpsfYFOB1tgkx81o4_1280.png" alt = "img/info.png">ABOUT</a>
        </li>
        <li id = "section"><a href ="#">
            <img src = "https://38.media.tumblr.com/11cb610a9c031eaf5bb8789cb9739717/tumblr_n9lpsfYFOB1tgkx81o1_1280.png"alt = "img/camera.png">PHOTOGRAPHY</a>
            <ul>
                <li><a href = "/photography">San Francisco</a></li>
                <li><a href = "#">Lake Tahoe</a></li>
            </ul>
        </li>
        <li id = "section"><a href ="#">
            <img src = "https://31.media.tumblr.com/bd112082d5c902750e78aa9d7dd817fc/tumblr_n9lpsfYFOB1tgkx81o5_1280.png"alt = "img/projects.png">PROJECTS</a>
            <ul>
                <li><a href = "/projects#informative">Informative</a></li>
                <li><a href = "/projects#profile">Profile</a></li>
            </ul>
        </li>
        <li id = "section"><a href ="#">
            <img src = "https://33.media.tumblr.com/e9a7f9ae946bdf2950be96f27023bb78/tumblr_n9lpsfYFOB1tgkx81o2_1280.png"alt = "img/contact.png">CONTACT</a>

            <ul>
                <li><a href = "http://www.twitter.com/skarchmit" target =" _blank">Twitter</a></li>
                <li><a href = "http://www.instagram.com/skarchmit" target =" _blank">Instagram</a></li>
                <li><a href="mailto:skarchit@gmail.com" target="_top">Email</a></li>
            </ul>
        </li>
    </ul>
</nav>
            <nav>
                <ul id = "viewNav">
                    <a href = "#"><li> Some things here</li></a>
                </ul>
            </nav>

有人知道如何使用javascript选择nav ul li吗

另外,我还没有学会jquery。所以我想用纯javascript来实现这一点。

“如何用javascript选择nav ul li”

你是说这个吗

document.querySelectorAll('nav > ul > li > ul > li');
请注意,您可以在适合您的位置删除直接子项条件

还要注意,
querySelectorAll
返回一个集合(非活动),因此必须对其进行迭代以操作每个元素

   var nestedLis = document.querySelectorAll('nav > ul > li > ul > li'),
       i = 0,
       len = nestedLis.length;

   for (; i < len; i++) nestedLis[i].style.backgroundColor = 'red';
“如何使用javascript选择导航ulli”

你是说这个吗

document.querySelectorAll('nav > ul > li > ul > li');
请注意,您可以在适合您的位置删除直接子项条件

还要注意,
querySelectorAll
返回一个集合(非活动),因此必须对其进行迭代以操作每个元素

   var nestedLis = document.querySelectorAll('nav > ul > li > ul > li'),
       i = 0,
       len = nestedLis.length;

   for (; i < len; i++) nestedLis[i].style.backgroundColor = 'red';
这应该行得通

document.querySelectorAll('NAV ul li ul li')
这应该行得通

document.querySelectorAll('NAV ul li ul li')

QuerySelector将返回对象的节点列表,即使只有一个。
因此,您需要在节点列表中指定元素的位置,如所示

document.querySelectorAll('ul li')[0]
var elems = document.querySelectorAll('ul li');

for (var i=0; i<elems.length; i++) {
    elems[i].style.background = color;
}
用于第一个元素。

如果需要遍历所有元素,则需要这样的循环

document.querySelectorAll('ul li')[0]
var elems = document.querySelectorAll('ul li');

for (var i=0; i<elems.length; i++) {
    elems[i].style.background = color;
}
var elems=document.queryselectoral('ulli');

对于(var i=0;iQuerySelector,即使只有一个节点列表,也会返回一个对象的节点列表。
因此,您需要在节点列表中指定元素的位置,如所示

document.querySelectorAll('ul li')[0]
var elems = document.querySelectorAll('ul li');

for (var i=0; i<elems.length; i++) {
    elems[i].style.background = color;
}
用于第一个元素。

如果需要遍历所有元素,则需要这样的循环

document.querySelectorAll('ul li')[0]
var elems = document.querySelectorAll('ul li');

for (var i=0; i<elems.length; i++) {
    elems[i].style.background = color;
}
var elems=document.queryselectoral('ulli');

对于(var i=0;i,只是为了包含jQuery解决方案

$('nav ul li ul li')
或者在子菜单中添加一个类,如#myID和target

$('#myID li')

只是为了包含jQuery解决方案

$('nav ul li ul li')
或者在子菜单中添加一个类,如#myID和target

$('#myID li')

你的HTML是什么样子的?我想影响多个导航。你的HTML是什么样子的?我想影响多个导航。假设次要的
ul
li
的直接子项,那么是的。它有点起作用。如果我做x[I].innerHTML=“更改”;它有效,但背景色无效。我可能用过!这在我不应该用的地方很重要。查看它。假设次要的
ul
li
的直接子对象,那么是的。它有点有效。如果我用x[I].innerHTML=“更改”;它有效,但背景色无效。我可能用过!在我不应该用的地方很重要。查看它。严格来说querySelectorAll返回一个节点列表,它没有所有的数组方法。你是对的Elliot de Vries。我会更正我的答案。谢谢。严格来说querySelectorAll返回一个节点列表,它有没有所有的数组方法。你是对的Elliot de Vries。我会更正我的答案。谢谢。这行吗?他尝试了什么?这是目前在低质量帖子队列中,我投票不删除,但你应该添加一些解释。这行吗?他尝试了什么?这是目前在低质量帖子队列中eue,我投票不删除,但你应该添加一些解释。