DOM

Posted lujieting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM相关的知识,希望对你有一定的参考价值。

* 1:根据id属性的值获取元素,返回来的是一个元素的对象
* document.getElementById("id属性的值")
*
* 2:根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个DOM对象
* document.getElementsByTagName("标签的名字")
*
* 3:根据name属性的值获取元素,返回来的是个伪数组,里面保存了多个DOM对象
* document.getElementsByName("name属性的值");
*
* 4:根据类样式的名字来获取属性,返回来的是个伪数组,里面保存了多个DOM对象
* document.getElementsByClassName("类样式的名字")
*
* 5:根据选择器获取元素,返回来的是一个元素对象
* document.querySelector("选择器的名字")
*
* 6:根据选择器获取元素,返回来的是一个伪数组,里面保存了多个DOM对象
* document.querySelectorAll("选择器的名字")



</script>
<!--1:阻止超链接跳转-->
<!--第一种写法-->
<!--<a href="http://www.baidu.com" onclick="alert(‘嘻嘻‘);return false" >百度</a>-->

<!--第二种写法-->
<!--<a href="http://www.baidu.com" onclick="return f1()">百度</a>-->
<script>
// function f1() {
// alert("哈哈");
// return false;
// }
</script>

<!--第三种写法-->
<!--<a href="http://www.baidu.com" id="bd">百度</a>-->
<script>
// document.getElementById("bd").onclick=function () {
// alert("嘎嘎");
// return false;
// };
</script>



<!--2:点击小图显示大图-->
<!--<a href="../img/10.jpg" id="aa"><img src="../img/20.jpg"></a>-->
<!--<img src="" id="ai"/>-->
<script>
// ver("aa").onclick=function () {
// ver("ai").src=this.href;
// return false;
// };
</script>



<!--3:列表隔行变色:奇黄偶红-->
<!--<input type="button" value="隔行变色" id="tt"/>-->
<!--<ul id="tb">-->
<!--<li>郁金香</li>-->
<!--<li>羊蹄甲</li>-->
<!--<li>六月雪</li>-->
<!--<li>木芙蓉</li>-->
<!--<li>金花茶</li>-->
<!--</ul>-->
<script>
// ver("tt").onclick=function () {
// var list=ver("tb").getElementsByTagName("li");
// for(var i=0;i<list.length;i++){
// if(i%2==0){
// list[i].style.backgroundColor="red";
// }else{
// list[i].style.backgroundColor="yellow";
// }
// }
// };
//或者
// ver("tt").onclick = function () {
// var list=ver("tb").getElementsByTagName("li");
// for(var i=0;i<list.length;i++){
// list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";
// }
// };
</script>



<!--4:鼠标经过列表时背景颜色发生改变-->
<!--<ul>-->
<!--<li>琴酒</li>-->
<!--<li>伏特加</li>-->
<!--<li>苦艾酒</li>-->
<!--<li>波本威士忌</li>-->
<!--<li>雪利酒</li>-->
<!--</ul>-->
<script>
// var lis=document.getElementsByTagName("li");
// for(var i=0;i<lis.length;i++){
// lis[i].onmouseenter=function () {
// this.style.backgroundColor="red";
// };
// lis[i].onmouseout=function () {
// this.style.backgroundColor="";
// };
// }
</script>



<!--5:根据name属性获取属性值-->
<!--<input type="button" value="设置属性" id="btt"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<!--<input type="text" value="您好" name="name2"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<!--<input type="text" value="您好" name="name3"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<!--<input type="text" value="您好" name="name1"/><br/>-->
<script>
// ver("btt").onclick=function () {
// var bttObj=document.getElementsByName("name1");
// for(var i=0;i<bttObj.length;i++){
// bttObj[i].value="您好啊,哈哈"
// }
// };
</script>




<!--6:根据类样式的名字来获取元素-->
<!--<input type="button" value="设置" id="uu"/>-->
<!--<p>12345</p>-->
<!--<p class="cls">45678</p>-->
<!--<span>123</span><br/>-->
<!--<span class="cls">456</span>-->
<!--<div>12333</div>-->
<!--<div class="cls">45666</div>-->
<script>
// ver("uu").onclick=function () {
// var aObj=document.getElementsByClassName("cls");
// for(var i=0;i<aObj.length;i++){
// aObj[i].style.backgroundColor="red";
// }
// };
</script>



<!--7:div高亮显示-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div></div>-->
<script>
// var aObj=document.getElementsByTagName("div");
// for(var i=0;i<aObj.length;i++){
// aObj[i].onmouseover=function () {
// this.style.border="2px solid red";
// };
// aObj[i].onmouseout=function () {
// this.style.border="";
// };
// }
</script>




<!--8:模拟搜索框-->
<!--<input type="text" value="请输入搜索内容" id="tex"/>-->
<script>
// //注册获取焦点的事件
// ver("tex").onfocus=function () {
// if(this.value=="请输入搜索内容"){
// this.value="";
// this.style.color="black";
// }
// };
// //注册失去焦点的事件
// ver("tex").onblur=function () {
// if(this.value==""){
// this.value="请输入搜索内容";
// this.style.color="gray";
// }
// };
</script>



<!--9:验证密码长度-->
<!--<input type="password" value="" id="yy"/>-->
<script>
// ver("yy").onblur = function () {
// if (this.value.length >= 6 && this.value.length <= 10) {
// this.style.backgroundColor = "red";
// } else {
// this.style.backgroundColor = "green";
// }
// };
</script>



<!--10:自定义设置和获取属性-->
<ul id="ll">
<!--<li>贝尔摩德</li>-->
<!--<li>水无怜奈</li>-->
<!--<li>世良真纯</li>-->
<!--<li>赤井秀一</li>-->
<!--<li>宫野志保</li>-->
</ul>
<!--总结-->
<!--设置自定义属性:setAttribute("属性的名字","属性的值")-->
<!--获取自定义属性的值:getAttribute("属性的名字")-->
<script>
// //根据id获取ul的标签,并且获取该标签中所有的li
// var lise=ver("ll").getElementsByTagName("li");
// //遍历循环
// for(var i=0;i<lise.length;i++){
// //先为每个li添加自定义属性
// lise[i].setAttribute("score",(i+1)*10);
// //点击每个li标签,显示对应自定义属性值
// lise[i].onclick=function () {
// alert(this.getAttribute("score"));
// };
// }
</script>




































































































































































































































以上是关于DOM的主要内容,如果未能解决你的问题,请参考以下文章

React虚拟dom中的key值

DOM事件: DOM事件级别DOM事件流DOM事件模型DOM事件捕获过程自定义事件

虚拟DOM(Virtual Dom) VS 影子DOM(Shadow Dom)

虚拟DOM(Virtual DOM)

关于DOM级别的一些问题,DOM0,DOM1,DOM2

DOM事件类