JavaScript DOM--文档对象模型

最新推荐文章于 2024-06-17 19:17:52 发布

未来可见

最新推荐文章于 2024-06-17 19:17:52 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/weixin_44436093/article/details/86631934

版权

DOM–(Document Object Model) 文档对象模型

(一) 使用DOM查找HTML元素

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。所以查找HTML中的某个标签即是查抄树上的某个节点。

1. 直接查找（通过属性、标签名等）

1 document.getElementById(“i1”); //根据id获取单个元素
2 document.getElementsByName(“i1”); //根据name属性获取多个元素
3 document.getElementsTagName(‘a’); //根据标签名称获取多个元素
4 document.getElementsByClassName(‘c1’); //根据class属性获取多个元素

2. 间接查找（通过已找到的其他标签）

1 tag = document.getElementById(“i1”);
2 tag.parentElement // 父节点标签元素
3 tag.children // 所有子标签
4 tag.firsChild // 第一个子标签元素
5 tag.lastChild // 最后一个子标签元素
6 tag.nextSibling // 下一个兄弟标签元素
7 tag.previousSibling // 上一个兄弟标签元素
8 No deList //节点集合

（三）使用DOM操作标签

1. 操作标签内容

tag = document.getElementById(“i1”);
content = tag.innerText; //获取标签中的文本内容
tag.innerText = “new_content”; //将标签内部文本赋值为new_content
复制代码
//使用innerText只能操作标签内部的文本内容，即使标签内部包裹了其他标签也会被其忽略
// 常用的操作标签内容的方法，使用方法同innerText
innerText — 仅文本
innerHTML — 所有内容（包括标签）
value: ---- 标签的值（下面分别是对有value属性的标签，使用value获取/操作值的详细介绍）
input — value获取当前输入的值
select — 获取选中value的值（selectedIndex）
textarea — 获取当前输入的

2. 操作标签一般属性

obj = document.getElementById(“i1”);
obj.attributes //---- 获取标签的所有属性
obj.getAttributes(key) //---- 获取标签某个属性的值
obj.setAttributes(key, value) //---- 为标签设置属性
obj.removeAttributes(key) //---- 为标签移除属性

3. 操作标签class属性

tag = document.getElementById(‘i1’)
tag.className // 获取tag的使用的class选择器名称
tag.className = ‘c1’ // tag使用名为c1的class选择器
tag.classList.add(‘c2’) // 给tag增添c2中的样式
tag.classList.remove(‘c3’) // 移除tag使用的c3中的样式

4. 操作标签样式

// 在上面的操作class属性中，是对一个标签添加或删除一个css代码样式块，对一个标签具体样式的操作如下

//比如，设置一个标签字体的大小
tag = document.getElementById(“i1”);
tag.style.fontSize = ‘16px’;

// 其他的各种样式也是采用这种方式设置，设置时样式字段去掉’-’，将每个单词的首字母大写(整体首字母小写，tag.style.backgroundColor)

5. 创建标签和操作标签

// 创建标签方式一：
var tag = “博客园”

// 创建标签方式二：
var tag = document.createElement(‘a’)
tag.innerText = “博客园”
tag.className = “c1”
tag.href = “http://www.baidu.com”

// 操作标签，即将创建的插入整个HTML文档的某个位置

// 方式一
var mytag = document.getElementById(‘i1’)
var obj = “”;
mytag.insertAdjacentHTML(“beforeEnd”,obj); //将标签插入到mytab所代表的标签结束之前的位置，即最后一个子标签
mytag.insertAdjacentElement(‘afterBegin’,document.createElement(‘p’)); //将标签插入到mytab所代表的标签开始之后的位置，即第一个子标签
//注意：第一个参数只能是’beforeBegin’、 ‘afterBegin’、 ‘beforeEnd’、 ‘afterEnd’

// 方式二
var tag = document.createElement(‘a’)
xxx.appendChild(tag) // 将新标签作为xxx的最后一个标签
xxx.insertBefore(tag,xxx[1]) // 将新标签插入xxx的第一个子标签之前
6.删除标签

 <body>
<button id="btn">删除</button>
<div id="box">
	hello world
</div>
<script type="text/javascript">
var buton=document.getElementById('btn');
var o=document.getElementById('box');
buton.onclick=function(){
	
	document.body.removeChild(o);
}
</script>
</body>

replaceChild(newNode,oldNode) //替换节点
insertBefore() //insertBefore() 方法在您指定的已有子节点之前插入新的子节点。
appendChild() //为当前节点添加一个新的子节点，放在最后的子节点
cloneNode() //返回当前节点的拷贝