DOM（document object model） 文档对象模型，一张网页看成是一个文档对象。浏览器在渲染网页节点完毕后，就会创建document对象。
无标题.png
1. 创建节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生的 Dom core 操作，显得有点复杂</title>
<script type="text/javascript">
// 编写web 网页的技术：html(定义网页的结构) css(网页的外观) JavaScript(网页的行为)
window.onload = function () {
var butObj = document.getElementById("creatElementId");
//注册了一个点击事件
butObj.onclick = function () {
//1.创建节点
var divObj = document.createElement("div");
//1.1 创建文本节点
//divObj.innerHTML= "zhangsan";
var textObj = document.createTextNode("zhangsan");
//1.2 把文本节点插入到 div 节点中
divObj.appendChild(textObj);
//2.找参照节点 body节点
var bodyObj = document.getElementsByTagName("body")[0];
//3.在body 节点后挂divObj
bodyObj.appendChild(divObj);
}
}
</script>
</head>
<body>
<button id="creatElementId">创建节点</button>
</body>
</html>
使用jquery 创建节点：
- 创建元素节点:$("<元素名称/>") 或者 $("<元素名称></元素名称>")
- 创建文本节点:$("<元素名称>文本内容</元素名称>")
- 创建属性节点:$("<元素名称 属性名称=‘属性值’>文本内容</元素名称>")
2. 插入节点
- 内部插入 4个方法
- 内部后面插入 append appendTo
- 内部前面插入 prepend prependTo
- 外部插入
- 外部前面插入 before insertBefore
- 外部后面插入 after insertAfter
3. 删除节点
- 删除元素有remove
- 删元素的内容 empty
- 删元素的属性 removeAttr
4. 查找节点
- 一种方式选择合适的选择器
- 第二种方式使用 jquery 提供的方法 （先定位，然后在找)
- children([expr]) **** 查找元素节点的儿子元素
- find([expr]) **** 查询元素节点的具体的子元素
- next([expr]) **** 查询元素节点的后面紧邻的同辈元素
- nextall([expr]) 查询元素节点的后面所有的同辈元素
- prev([expr]) **** 查询元素节点的前面紧邻的同辈元素
- prevall([expr]) 查询元素节点的前面所有的同辈元素
- siblings([expr]) **** 找到前后所有同辈元素
- parent([expr]) **** 查找元素的父元素
- parents([expr]) 找到元素的所有祖先元素。
5.获取和设置元素节点的文本内容
- text(); 获取文本
- text("内容")；设置
6.获取和设置元素节点的属性
-
attr("属性名称"); 获取属性
-
attr("属性名称"，“属性值”).设置属性
-
prop("属性名称"):获取 官方推荐使用它
7.操作样式 使用了css方法包装了 style对象
设置单个样式：
css(“样式的名称”,"样式的值")
设置多个样式
css({"样式的名称1":"样式名称1的值","样式的名称2":"样式名称2的值"...})
技巧：样式中名称出现有中划线，然后把中划线去掉，中划线后面的单词首写字母变大写。
eg:background-color ----- backgroundColor
- 作业：使用jquery 操作 dom 完成 动态添加一个table表，然后提供指定删除table表的每一行 tr，提供添加 行 tr
网友评论