DOM

最新推荐文章于 2022-06-14 17:09:32 发布

原创最新推荐文章于 2022-06-14 17:09:32 发布 · 129 阅读

CC 4.0 BY-SA版权

Dom节点: document ， object ， model 文档对象模型
节点种类：元素节点，文本节点，属性节点等十二种；
节点之间的关系：兄弟节点，父子节点，父节点，子节点，兄弟节点
节点对象：属性和方法
1.节点对象属性：
（1）childNodes 获取所有子节点（元素节点，文本节点）
（2）nodelist 节点索引
（3）firstChild 第一个
（4）lastChild 最后一个
（5）parentNode 父节点
（6）previoussibling 上一个兄弟节点
（7）nextSibling 下一个兄弟节点
（8）innerHTML 开始标记和结束标记之间的内容
document 文档对象
属性
body body元素对象;
title 标题;
VRL 网页地址;
links 超链接;
HTMLCollection 集合索引 length;
images 图片;
forms 表单;
2.方法：
write;
writeln (每一个表达式后加一个换行符，但HTML不生效，因为HTML有固定
的换行符br);
getElementById 根据ID查找节点对象，找到返回值，找不到为null;
3.节点操作：增删改查
（1）增：
write
createElement 创建元素节点
createTextNode创建文本节点
例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<script>
var op=document.createElement('p');//创建一个p标签
op.innerHTML='hello';//赋值
console.log(op);输出p
document.body.appendChild(op)//在body下追加一个p标签
</script>
</body>
</html>

appendChild 追加孩子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id='box'>
	</div>
<script>
	var os=document.createElement('span');//创建一个span
    os.innerHTML='内容';
    var o=document.getElementById('box');//根据Id查找元素
    o.appendChild(os);/在div里追加一个span
    var oa=document.createElement('a');//在创建一个a
    oa.innerHTML='aaa';
    oa.href="#";
    o.appendChild(oa);//在div里追加一个a标签
</script>
</body>
</html>

（2）删除节点
removeChild 删除节点
（3）复制节点
cloneNode 复制节点（默认只复制节点本身，布尔类型，true复制包含子节点，flase不包括子节点）；
insertBefore 在指定的节点前插入标签
o.insertBefore(新节点，老节点)；
replaceChild 替换节点
节点属性：
HTML || DOM
（src） || （src）
（title） || （ title）
（href） || （href）
（action） || （action）
（alt） || （alt）
（for） || （ htmlFor）
（class） || （ className）
（value） || （value）
checked复选框被勾选状态
selected 默认选中第几个
1.节点属性的值
节点对象.属性名=值
2.节点属性值获取
节点对象.属性名
onchange改变
3.属性名.focus()获取焦点
4.js中创建：
thead:createTHead;
tbody:createTBody;
tr:insertRow;
td:insetCell;
5.事件，一件事；
（1）
以on为前缀 on事件名
事件不会自己执行，需要触发；
事件三要素：1.事件对象2.事件名称3.事件处理函数；
（2)常见事件写法
1.嵌入式（传统事件绑定）优点：简单易懂；缺点：把h5和js混在一起，不利于多人开发；
2.脚本模型（现代事件绑定）：在javascript完成事件绑定；
事件：click, load, mouseover, mouseout, mouseenter, mouseleave, mousemove, resise
3.w3c事件
（1）添加事件：addEventListener(事件名称，事件函数，false)
（2）删除事件：removeEvenListener(事件名称，事件函数，false)
(3).Dom样式的修改
对象.style.属性名=属性值；
(4).Dom样式值的获取
1.对象.style.属性名；（只能获取行内元素）
2.window.getcomputeedstyle（对象.null）(获取所有对象样式)
3.offset.left/right/top/bottom/width/height;获取左/右/上/下边距/宽/高；