回顾选择器
基础选择器
1.元素选择器
元素名(标签名)
如：
h1
div
a
span
input
form
option
select
2.id选择器
在html里面 使用id=“cc”
使用#来查找 id选择器
如：#cc
3.类选择器
在HTML里面使用class设置
在CSS和JS里面 查找 使用.类选择器的名字
如：.haha
如：<div class = "haha"></div>
后代选择器
只要是 某个元素中的 子元素 都可以选择上
后代选择器是通过空格隔开的 如：.xx .title{}、div a{}、#ff .vv{}
两个选择器之间是有空格的
子类选择器
只能选择直接子元素
父元素的选择器>子元素的选择器
如：
.item>p
交集选择器
div.top
都包含
p.top
并集选择器
html,body
.top,.nav
属性选择器
input[type=password]
选择器名[属性名=属性值]
子类第几个元素
：first-child
：nth-child
注意分清交集和后代
1.查询DOM元素
1.document.querySelector("选择器")
查找到的是第一个元素
2.document.querySelectorAll("选择器")
伪数组
3.id选择器 document.getElementById("不需要加#");
4.通过类选择器查找document.getElementByClassName("div");
伪数组
5.通过元素名查找document.getElementByTagName("div");
伪数组
2.创建DOM元素
document.createElement("标签的名字")
步骤
1.创建dom元素
var 变量名= document.createElement("标签的名字")；
2.放内容
dom.innerText = "wenben"
放文本
dom.innerHTML = "<div>< img src="" ></div>"
放HTML里的字符串
dom.src="";
dom.appendChild(子元素)；
dom 不一定是父元素
3.放到父元素中
父元素.appendChild(dom);
<ul class="nav"></ul>
<script>
//在nav里面 创建一个li 里面放入 首页 文字
var nav = document.querySelector(".nav");
var li = document.createElement("li");
li.innerText = "首页";
nav.appendChild(li);
</script>
<ul class="goods"></ul>
//商品goods
var goods =document.querySelector(".goods");
var goodsItem = document.createElement("li");
goods.appendChild(goodsItem);
