2018-09-05
2018-09-11 本文已影响4人
其实_dnhl
选择器
<body>
<ul id='box'>
<li class='list'>li1</li>
<li class='list'>li2</li>
<li class='list'>li3</li>
</ul>
<script>
//1.id
var el = document.getElementById("id");
//特点:只能找到一个
//class
//var ele = document.getElementById("list");
// console.log(ele[0]);
// ele[0].style.color='red';
// ele[1].style.color='red';
// ele[2].style.color='red';
// for(var i=0;i<ele.length;i++){
// ele[i].style.color='red';
// }
// 特点：能找到多个,返回一个动态集合(数组)
//TagName 标签名
// var ele=document.getElementsByTagName('tagname')
// 特点：能找到多个,返回一个动态集合(数组)
//name属性适用于表单元素
// var ele=document.getElementsByName('name');
//选择器：
// var el=document.querySelector('.container>ul>li>a>span>b');
// 特点：只能找一个
// var ele=document.querySelectorAll('.container>ul>li');
// 能找到多个，动态集合(数组)
//通关元素间关系查找
// 父子关系：
// parentElement 查找一个元素的父元素
// children 查找一个元素的所有子元素
// firstElementChild 查找父元素下的第一个子元素
// lastElementChild 查找父元素下的最后一个子元素
// console.log(box.parentElement) ;
// console.log(box.children);
// 兄弟关系
// previouseElementSibling 前一个兄弟
// nextElementSibling 下一个兄弟
var a = document.createElement('a');
a.innerHTML = "去百度";
a.href = 'http://www.baidu.com';
document.querySelector('body').appendChild(a);
</script>
<body>
