Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问
通常通过js可以对html元素进行操作,首先就要先找到这个元素;
- 通过使用 getElementById("id") 方法 //id标签只有一个
- 通过使用 getElementsByTagName(" ") 方法 //根据标签名找,找到的是数组
- 通过使用 getElementsByClassName(" ") 方法 // 根据classname,找到的数组
- 通过使用 getElementsByName(" ") 方法 // 根据name找,找打的是数组 zhu:括号内加引号
Window 对象属性和属性 http://www.runoob.com/jsref/obj-window.html
http://www.w3school.com.cn/example/hdom_examples.asp
<body onload="函数()"> 在body加载完再调用这个函数
document操作:
1、找元素 get Element、、、
2、操作内容 innerHtml
非元素内容属性:. innerHTML 设置或返回元素的内容 //例:documentGetmentById("id").innerHTML (元素内的内容是:)=" "
表单元素内容属性:. value
元素的链接:.href 网页跳转形式:.target~~
图片地址.src
<script> function changeLink(){ document.getElementById('myAnchor').innerHTML="金百度"; document.getElementById('myAnchor').href="http://www.baidu·com"; document.getElementById('myAnchor').target="_blank"; } </script> </head> <body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a> <input type="button" onclick="changeLink()" value="修改链接"> </body>
3、操作属性:
设置setAttribute(“属性”,“属性值”)
得到 getAttribute(“属性名”) --返回属性值
删除removeAttribute(“属性名”)
4、作用样式 :
元素.style.样式 = "";
<script type="text/javascript"> function on(obj){ obj.style.height = '200px'; obj.style.width = "200px"; } </script> > </head> <body> <div id="qq" style=" 100px; height: 100px; background-color: red;" onClick="on(this)"></div>
5、操作元素(创建标签,删除标签)
创建元素 document.createElement("标签名")
追加元素 父元素.appendChild("子元素对象")
删除元素 元素对象.remove()
插入元素 父元素.insertBefore("子元素",“在谁之前”)、、跟数组和用,实现插入位置的控制
var lii = document.getElementById("id")
ul(父元素).insertBefore(lii,id[0]) // 把新的li插入到ul的最前面
document.createTextNode("这是新段落。"
节点
var b = a.nextSibling,找a的下一个同辈元素,注意包含空格;
var b = a.previousSibling,找a的上一个同辈元素,注意包含空格;
var b = a.parentNode,找a的上一级父级元素;
var b = a.childNodes,找出来的是数组,找a的下一级子元素;
var b = a.firstChild,第一个子元素,lastChild最后一个,childNodes[n]找第几个;
alert(nodes[i] instanceof Text); 判断是不是文本,是返回true,不是返回flase,用if判断它的值是不是flase,可以去除空格。
时间控制:
setInterval( 函数,时间):按照指定的周期(以毫秒计)来调用函数或计算表达式。
setTimeout():在指定的毫秒数后调用函数或计算表达式。