1,方法,div.parentNode 返回节点的父节
div.childNodes 返回节点的子节点集合
div.firstchild 获得第一个子节点
div.lastchild 获得最后一个子节点
div.previousSlibing 获取上一个节点的内容
div.nextsSlibing 获取下一个节点的内容
div.childNodes 获取所有子节点的集合
div.firstchild 获得第一个子节点 div.lastchild 获得最后一个子节点
注:一般不用这两个方法来获取对象的子节点,因为无论是空格还是换行都会被计算到对象的节点中,多以获取到的即使是文本节点也算一个节点,
2一般我们使用获取节点的方法,一般是获取它的元素节点,方法为
div.firstElementChild
div.lastElementChild
div.previousSlibing
div.nextSlibing
他只会获取对象子节点中的元素节点
3创建,添加,替换,删除
创建一个新的节点
var element = document.creatElement( "标签类型" )
将B标签添加到A标签的子节点集合的
A.appendChild( B )
删除一个节点(首先调用它的父节点,然后通过父节点来删除该节点)
div.parentNode.removeChild( node )
替换一个节点(首先也是调用它的父节点,然后通过父节点来替换该节点)
div.parentNode.replaceChild( newnode, oldnode)
4获得节点的nodeName,nodeValue,nodeType
nodeType根据类型不同就返回
1==元素element,
2==属性attr,
3==文本text,
8==注释comments,
9==文档document
注:这些返回的数字我们可以配套 i f 判断来进行别的操作
nodeVlue对文本节点有用,假如我们需要获得一个文本节点,可以他通过child方法来获取数组,跟据文本节点的下标用nodeVlue的方法来获取这个文本信息,同时nodeVlue对元素节点没用,都会返回null
nodeName会返回对应节点的name信息,假如是
文本节点就返回#text
元素节点就返回该元素标签的大写名称如 (SCRIPT UL LI.....)
5操作节点的属性
div.getAttribute(" 属性名 ") 获取节点的属性信息
div.setAttribute( "属性名 " ,”属性值“) 设置节点的属性信息
6.操作节点的样式
通过ID获得该节点并设置其样式的方法
document.getElementById(“tv_div" ) . style="blackground-color : red ”;
通过点style 的方法直接给它 添加 样式类型
document.getElementById(“tv_div" ). classNode="样式名称";
也可以直接添加class样式,输入class样式名,就能将当前的样式覆盖原来的class样式,请注意,是覆盖,不是添加
获取元素的样式
alert ( document.getElementById( " tv_div" ).style.display )
不兼容IE的话,就用下面的方法
alert ( document.getElementById( " tv_div" ).currentstyle.display )
7,触发事件类型
onclick 点击触发
onmouseover 当鼠标移到某元素之上
onmouseout 当鼠标从某元素移开
onmousedown 鼠标按钮被按下
当然还有很多的时间类型, w3c shcool
代码笔记
<div id="tv_div"><input type="button"value="确定"><ul><li>vvvvvv</li><li>bbbbb</li><li>aaaaa</li></ul></div>
<script>/*获得父对象*/
var tv_div = document.getElementById("tv_div")
/*获得第一个子节点*/
alert(tv_div. firstChild.value)
/*获得最后一个子节点*//*在获得最后一个子节点的子节点*/
alert(tv_div.lastChild.lastChild.innerHTML)
/*获得前一个节点的内容*/
alert(tv_div.lastChild.lastChild.previousSibling.innerHTML)
/*再获得下一个节点的内容*/
alert(tv_div.lastChild.lastChild.previousSibling.nextSibling.innerHTML)
/*获得父节点的长度*//*换行和空格都算长度之一*/
alert(tv_div.childNodes.length)
</script>
---------------------------------------------------------------------------------------
不用在意空格和换行的获取元素的节点,他没有计算除元素以外的文本和空格的影响,是我们获取
节点的最佳方法
<div id="tv_div">
<input type="button"value="确定">
<ul>
<li>vvvvvv</li>
<li>bbbbb</li>
<li>aaaaa</li>
</ul>
</div>
<script>
/*获得最后一个元素子节点*/
alert(tv_div.lastElementChild.lastElementChild.innerHTML)
/*获得第一个元素子节点*/
alert(tv_div.firstElementChild.value)
/*获得前一个元素节点*/
alert(tv_div.lastElementChild.innerHTML)
/*获得后一个元素节点*/
alert(tv_div.firstElementChild.nextElementSibling.innerHTML)
---------------------------------------------------------------------------------------
<ul id="nodeList"><li>nodeList</li>
<li>nodeValue</li>
<li>nodeName</li>
</ul>
<script>
var nodeList = document.getElementById("nodeList")
alert(nodeList.firstChild.nodeType)
alert(nodeList.firstChild.nodeName)
alert(nodeList.firstChild.nodeValue)
/*nodeName要是文本就返回#text,元素节点就返回大写的标签名*/
/*nodeType根据类型不同就返回1==元素element,2==属性attr,3==文本text,8==注释comments,9==文档document*/
/*nodeValue返回该节点的的包含值,假如是标签就返回null假如是文本就返回该节点的文本内容,只针对文本*/
---------------------------------------------------------------------------------------
<div id="div1" οnmοuseοver="over()"οnmοuseοut="out()">
改变样式
</div>
<!--<input type="button"value="确定"οnmοuseοver="">-->
<script>
function over(){
document.getElementById("div1").style.color="#f40"
document.getElementById("div1").style.fontSize="18px"
}
function out(){
document.getElementById("div1").style.color="black"
document.getElementById("div1").style.fontSize="16px"
}
</script>