当前位置:首页 » JAVA技术教程

浅尝JavaScript document对象

2017-06-19 22:41 本站整理 浏览(10)

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不支持统一加事件,但是可以通过循环加事件