web.jpeg
JS有三部分组成
- ECMAscript(欧洲计算机制造商协会) ： 描述了JS的语法和基本对象的规范
- DOM：文档对象模型，处理网页的内容方法和接口
- BOM ：浏览器对象模型，浏览器交互的方法和接口
我们知道 整个文档
document，
- 元素:页面中所有的标签,元素---element, 标签----元素---对象
- 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
- 根元素:html标签
这样就构成了DOM树
dom树.gif
我们在JS操作html元素认知有提到获取元素的一些方法
-
getElementById()id 访问节点 -
getElementsByTagName()标签访问节点数组 -
getElementsByClassName()类名 有兼容性问题
现在描述三个节点属性
-
nodeType节点类型1是标签 2是属性 3是文本 -
nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text -
nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容
节点的关系
- 父节点
parentNode和父级元素parentElement同一个 - 子节点
childNodes这个节点里面包含: 空格 换行 标签 文本-
firstChild第一个子节点在ie 678中是 第一个子元素 -
firstElementChild第一个子元素 正常浏览器在ie 678中是 不支持 -
lastChild最后一个子节点 ，在ie 678中是 最后一个子元素 -
lastElementChild最后一个子元素，在ie 678中是 不支持
-
- 与子节点对应的是
子元素 children
注意：如果使用
childNodes子节点的时候，如果你要找到对应的元素，需要使用到nodeType == 1这属性处理判断
- 兄弟节点(
sibling)- 下一个兄弟节点
-
nextSibling认识 下一个兄弟节点,在ie 678中是 元素 -
nextElementSibling其他浏览器 下一个兄弟元素在ie 678中是 不支持
-
- 上一个兄弟节点
-
previousSibling上一个兄弟节点在ie 678中是 元素 -
previousElementSibling上一个兄弟元素在ie 678中是 不支持
-
- 下一个兄弟节点
<script>
var btn = document.getElementById("btn");
//获取ul
var oul = document.getElementById("uu");
btn.onclick = function(){
//获取子节点
var nodes = oul.childNodes;
var count = 0;
for(var i = 0; i < nodes.length; i ++){
if(nodes[i].nodeType == 1 && nodes[i].nodeName == "LI"){
nodes[i].style.backgroundColor = (count % 2 == 0 ? "red":"yellow");
count++;
}
}
}
</script>
image.png
我们了解到节点关系，那么在日常开发中有时我们还需要创建元素对象，那么怎么创建元素呢?
3种创建元素节点的方式
document.write("<p>这是一个p标签</p>");在文档中写入内容的方式
- 缺点: 在创建元素的时候，如果是在页面加载完毕后，通过这个创建的元素，那么页面上原来存在的内容全部被覆盖删除了
innerHTML创建元素内容
- 缺点:多次创建时，会覆盖原来的内容
- 例子,在
div盒子里创建多个li
<script>
var btn = document.getElementById("btn");
var dv = document.getElementById("dv");
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚"];
btn.onclick = function(){
var str = "<ul style='list-style-type: none;cursor: pointer'>"
for(var i = 0; i < names.length; i ++){
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
dv.innerHTML = str;
//添加事件
var lists = dv.getElementsByTagName("li");
for(var j = 0; j < lists.length; j ++){
lists[j].onmouseover = function(){
this.style.backgroundColor = "red";
}
lists[j].onmouseout = function(){
this.style.backgroundColor = "";
}
}
}
</script>
Untitled.gif
createElement(元素的名称) 创建元素节点
- 通常与之匹配的有
appendChild(元素节点)添加孩子放到盒子的 最后面 -
insertBefore(插入的节点，参照节点)子节点 添加孩子 放在参照节点的前面 -
removeChild()删除孩子节点
<script>
var btn = document.getElementById("btn");
var dvObjc = document.getElementById("dv");
btn.onclick = function(){
//创建元素 返回的一个dom对象
var pObjc = document.createElement("p");
//给创建的元素设置 内容
pObjc.innerText = "这是一个创建的p标签";
//把创建的元素拼接到 拼接到最后
dvObjc.appendChild(pObjc);
}
</script>
创建元素节点.gif
- 动态创建表格
<script>
var arr = [
{ name: "百度", href: "http://www.baidu.com" },
{ name: "谷歌", href: "http://www.google.com" },
{ name: "优酷", href: "http://www.youku.com" },
{ name: "土豆", href: "http://www.tudou.com" },
{ name: "快播", href: "http://www.kuaibo.com" },
{ name: "爱奇艺", href: "http://www.aiqiyi.com" }
];
//获取按钮
var btn = document.getElementById("btn");
var dvObjc = document.getElementById("dv");
//创建元素
var tableObjc = document.createElement("table");
tableObjc.border = "1px solid #cccccc";
tableObjc.cellPadding = "0";
tableObjc.cellSpacing = "0";
//拼接
dvObjc.appendChild(tableObjc);
//点击创建
btn.onclick = function(){
for (var i = 0; i < arr.length; i++) {
var jsonObj = arr[i];
//创建tr
var trObjc = document.createElement("tr");
//创建td
var tdObjc1 = document.createElement("td");
tdObjc1.innerText = jsonObj["name"];
trObjc.append(tdObjc1);
var tdObjc2 = document.createElement("td");
tdObjc2.innerHTML = "<a href="+jsonObj["href"]+">"+jsonObj["name"]+"</a>";
trObjc.append(tdObjc2);
//拼接
tableObjc.append(trObjc);
}
}
</script>
Untitled.gif
