<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body class='aa'>
<form>
<input id='i1' type='text'/>
<p>aaasssssssss</p>
<ol>
<li id="li1">Coffee</li>
<li>Milk</li>
</ol>
</form>
<script>
/**
alert(document.documentElement.childNodes.length);
alert(document.documentElement.childNodes[1].attributes.length);
alert(document.documentElement.childNodes[1].attributes[0].nodeName);
alert(document.documentElement.childNodes[1].attributes[0].nodeValue);
alert(document.documentElement.childNodes[1].attributes('class').nodeValue);
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].textContent)//可能浏览器不支持
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerText)
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerHTML)
alert(document.getElementsByTagName('p')[0].innerText);
alert(document.getElementsByNodeName('p')[0].innerText);
alert(document.body.previousSibling.nodeName);
var my=document.getElementById('i1');
alert(my.nextSibling.nodeName);
**/
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';
</script>
</body>
</html>
1:查看属于自己的,nodeType,nodeName,nodeValue
<script>
alert(document.nodeType);
alert(document.nodeName);
alert(document.nodeValue);
</script>
2:documentElement
3:元素的名称
alert(document.documentElement.nodeName);
alert(document.documentElement.tagName);
4:子节点
alert(document.documentElement.hasChildNodes());
alert(document.documentElement.childNodes.length);
alert(document.documentElement.childNodes[0].tagName);//head
5:属性
alert(document.documentElement.childNodes[1].hasAttributes());
alert(document.documentElement.childNodes[1].attributes.length);
alert(document.documentElement.childNodes[1].attributes[0].nodeName); //属性名称
alert(document.documentElement.childNodes[1].attributes[0].nodeValue);//属性内容
alert(document.documentElement.childNodes[1].attributes('class').nodeValue);//获取指定属性的内容
6:访问标签的内容
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].nodeName)
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].textContent)//可能浏览器不支持
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerText)
alert(document.documentElement.childNodes[1].childNodes[0].childNodes[2].innerHTML)
nodeName与tagName的区别
nodeName所有节点的名称都可以出来
tagName只有元素的名称可以出来,有些节点的名称可能不出来,还是用nodeName好哦
7:dom访问的快捷方法
通过childNodes,parentNode,nodeName,nodeValue,attributes这些属性,可以在dom树结构上实现自由导航,并出来相关的文档操作
document.getElementsByTagName('p')[0]; //通过TagName寻找
getElementByClassName(); // 通过元素的class属性寻找元素
querySelector();//通过css选择器的方式寻找元素(找第一个)
querySelectorAll();//通过css选择器的方式寻找元素(找全部)
8:兄弟节点,及首尾节点
document.body.nextSibling;--null
document.body.previousSibling;---<head>---</head>
alert(document.body.previousSibling.nodeName);
var my=document.getElementById('i1');
alert(my.nextSibling.nodeName);
9:dom节点修改
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
我们还可以通过nodeValue=‘xxx’;来修改文本的值
10:样式修改
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';//修改样式
11:新增节点
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';
document.body.appendChild(a);
12:移除节点
var a=document.getElementById('li1');
alert(a);
a.innerHTML='aaa';
a.style.fontWeight='bold';
document.body.appendChild(a);
document.body.removeChild(a);
13:事件
内联HTML属性写法
<div οnclick='alert(111)'>click</div>
元素属性法
<div id='div1'>click</div>
</body>
<script>
var mydiv=document.getElementById("div1");
mydiv.οnclick=function(){
alert("div1");
}
</script>
</html>
事件监听(有的浏览器可能不支持)
<div id='div1'>click</div>
</body>
<script>
var mydiv=document.getElementById("div1");
mydiv.addEventListener('click',function(){
alert(111);
});
</script>
js事件捕捉,和事件冒泡
js闭包在网上收索看看
4对象
var dog={
a:a,
b:b,
c:function(){
}
}
访问对象,dog['a'] 或者dog.a
调用对象中的方法,dog.c();或者dog['c']();
修改属性 dog.a='b';修改方法 dog.c=function(){
xxxxxxxxxx
}
删除一个属性
delete dog.a;
用构造器创建对象用new关键字
function hero(){
this.occupation='nianja';
}
var h=new hero();
h.occupation;
5:原型(待续)
5.1 js都是引用传递,java是值传递
6:继承(待续)