浅尝JavaScript document对象

document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

 

<body>
<div id="h">
<div></div>
<span></span> 
</div>
<div id="l"></div>
<div class="haha"></div>
<div class="haha"></div>
<span class="haha"></span>
<input type="text" name="dada" />
</body>

<script>
 //var a=document.getElementById("l");
//a.childNodes
//alert(a.previousSibling) 找到同级
/*alert(a.childNodes[5]);*///找子节点的时候的时候除了找标签还会找空格
/*alert(a.firstChild)*///返回文档的首个子节点
/*alert(a.parentNode)*///找到该元素的父级元素
/*alert(a)*///找到的只有一个

/*var b=document.getElementsByClassName("haha");//找到的是多个,返回一个数组
alert(b[2]);*/

/*var c=document.getElementsByTagName("div")//根据标签名找，找到的是多个,返回一个数组
alert(c[0])

/*var d=document.getElementsByName("dada")
alert(d[0])根据name找，可以找到多个，返回数组，主要针对表单元素。*/





操作样式
var a=document.getElementById("h")
a.style.backgroundColor="red"
alert(a.style.backgroundColor)
a.style.width=""   属性值为空的时候就是删除了样式
<div id="aaa">

<span>hahaha</span>
</div>


</body>
<script>
//document整个文档

//控制元素
//var a=document.getElementById("aaa")

/*a.remove()*/;     //移除元素，移除只是在浏览器显示页面移除了。
//var bb=document.createElement("span")
//a.appendChild(bb)    //追加子元素

//操作元素
//var a=document.getElementById("aaa");
/*alert(a.innerText) */                       //innerText      取元素中的文本内容
a.innerText="world"               //给元素赋文本值
//alert(a.innerHTML)          //区元素的HTML代码内容
//a.innerHTML=""                   //给元素放一个HTML代码


表单元素
/*var a=document.getElementById()
a.value="yonghuming";//给元素赋值
alert(a.value);*///取值 


操作属性
var a=document.getElementById("aaa");
a.setAttribute("bs","100")  ////给标签加属性、属性
a.getAttribute("bs")   //获取属性值
a.removeAttribute("bs")  // 移除属性
/*var a=document.getElementById("aaa");
a.setAttribute("bs","200");*/
//alert(a.getAttribute("bs"));

　　

/*鼠标事件
onclick 鼠标单击触发
ondblclick 鼠标双击触发
onmouseover 鼠标移上去触发
onmouseour 鼠标离开触发
onmousemove 鼠标移动触发*/

/*键盘事件：
onkeydown 键盘按下触发
onkeyup 按键抬起触发
onkeypress 按键触发*/


/*表单元素事件
onfocus 获得焦点出发
onblur 失去焦点触发
onchange 内容改变的时候触发
*/
//JS不支持统一加事件，但是可以通过循环加事件

posted on 2017-06-19 21:53  superficial。  阅读(223)  评论(0)    收藏  举报

导航