DOM操作与选择器详解-优快云博客

在页面上获得各种元素节点对象而使用的条件就是选择器。
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
1.基本选择器
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
在这里插入图片描述

2. 层次选择器
2.1 $(s1 s2) [父子]
派生选择器：在s1内部获得全部的s2节点(不考虑层次)

$(“div  span”):
<div>
	<span></span> 1
	<p>
		<span></span> 1
	</p>
</div>
<span></span>

2.2 $(s1 > s2) [父子]
直接子元素选择器: 在s1内部获得子元素节点s2

$(“div > span”):
<div>
	<span></span> 1
	<p>
		<span></span>
	</p>
	<span></span> 1
</div>
<span></span>

2.3 $(s1 + s2) [兄弟]
直接兄弟选择器：在s1后边获得紧紧挨着的第一个兄弟关系的s2节点

$(“div + span”):
<div>
	<span></span>
	<p>
		<span></span>
	</p>
	<span></span>
</div>
<span></span> 1
<p></p>
<span></span>

2.4 $(s1 ~ s2) [兄弟]
后续全部兄弟关系节点选择器：在s1后边获得全部兄弟关系的s2节点

$(“div ~ span”):
<div>
	<span></span>
	<p>
		<span></span>
	</p>
	<span></span>
</div>
<span></span> 1
<p></p>
<span></span> 1

在这里插入图片描述

3.并且(过滤)选择器

3.1 基本用法

3.2 复杂用法
注意：
① 并且选择器可以单独使用
② 各种选择器都可以构成“并且”关系
③ 并且关系的选择器可以使用多个，每个选择器使用前，已经获得节点的下标要“归位”(归零)处理
④ 多个并且关系的选择器，没有前后顺序要求，但是要避免产生“歧义”
在这里插入图片描述

4. 内容过滤选择器
4.1 :contains(内容)
包含内容选择器，获得的节点内部必须包含指定的内容

$(“div:contains(beijing)”)
<div>xiaoming like <span>beijing</span></div> 1
<div>mary like newyork</div>

4.2 :empty
获得空元素(内部没有任何元素节点/文本(空) 节点)节点对象

$(“div:empty”)
<div>xiaoming like beijing</div>
<div>mary like newyork</div>
<div><p></p></div>
<div>     </div>
<div></div> 1

4.3 :has(选择器)
节点内部必须包含指定选择器对应的元素

$(‘div:has(.apple)’)
<div><p></p></div>
<div><span class=”apple”></span></div> 1

4.4 :parent
寻找的节点必须作为父元素节点存在

$(‘div:parent’)
<div>xiaoming like beijing</div> 1
<div>mary like newyork</div> 1
<div><p></p></div> 1
<div>     </div> 1
<div></div>

在这里插入图片描述
5.表单域选中选择器
复选框、单选按钮、下拉列表
$(:checked)复选框、单选按钮选中选择器
$(:selected) 下拉列表选中选择器

总结：
1.选择器使用
a)基本
#id .class tag标签 * s1,s2,s3(联合选择器)
b)层次
$(s1 s2)
$(s1 > s2)
$(s1 + s2)
$(s1 ~ s2)
c)并且
:first :last
:eq() :gt() :lt()
:odd :even
$(s1s2s3) 【并且选择器】获得的节点必须满足s1/s2/s3全部条件
$(s1,s2,s3) 【联合选择器】获得的节点满足s1/s2/s3其中的一个条件即可
d)内容过滤
:contains(text) :empty :has(选择器) :parent
e)表单域选中
:checked 复选框、单选按钮
:selected 下拉列表
四. 属性操作

<input  type=”text”  class=”apple”  id=”username”  name=”username” value=”tom” 
	address=”beijing”  />

dom方式操作属性值：
获取：
itnode.属性名称
itnode.getAttribute(属性名称);
修改：
itnode.属性名称= 值;
itnode.setAttribute(属性名称，值);

jquery方式操作属性(attribute)：
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置(修改)属性的信息
$().removeAttr(属性名称); //删除属性
$().attr(json对象); //同时为多个属性设置信息值，json对象的键值对就是名称和值
$().attr(属性名称，fn); //通过fn函数执行的return返回值对属性进行赋值

获取属性信息：
在这里插入图片描述
三种方式修改属性：

删除属性：

五. 快捷操作
1.class属性值操作
$().attr(‘class’,值); //修改class属性
$().attr(‘class’); //获取class属性
$().removeAttr(‘class属性’); //删除class的属性

class具体快捷操作方法：
$().addClass(class属性值); //给class属性追加信息值
$().removeClass(class属性值); //删除class属性中的某个信息值
$().toggleClass(class属性值); //开关效果，信息值有就删除，没有就添加
在这里插入图片描述

class属性值的删除和开关效果：

2. 标签包含内容操作
<div>hello<span>world</span></div>
javascript操作：
dvnode.innerHTML; 获得div包含的信息
dvnode.innerHTML = XXX；设置div包含的内容
(innerHTML不是w3c标准技术，许多浏览器对其有支持而已)

jquery操作：
$().html(); //获得节点包含的信息
$().html(信息); //设置节点包含的内容
$().text(); //获得节点包含的“文本字符串信息”内容
$().text(信息); //设置节点包含的内容(有html标签就把“><”符号变为符号实体)
在这里插入图片描述

2.1 html() 和 text()方法的区别：
①获取内容
前者可以获取html标签和普通字符串内容
后者只获取普通字符串内容 (会自动过滤html标签)
②设置内容
前者可以设置html标签和普通字符串内容
后者只设置普通字符串内容，如果内容里边有tag标签内容，就把其中的”<”“>”符号转变为符号实体 <-----< >----> 空格------ 
以上两种操作(获取/设置)如果针对的操作内容是纯字符串内容，则使用效果一致。
3. css样式操作
$().css(name，value); //设置
$().css(name); //获取
$().css(json对象); //同时修改多个css样式
3.1 css()样式操作特点：
① 样式获取，jquery可以获取行内、内部、外部的样式。
dom方式只能获得行内样式
② 获取复合属性样式需要拆分为"具体样式"才可以操作
(有的浏览器是可以获得复合属性信息的，例如chrome)
例如： background 需要拆分为 background-color background-image 等进行操作
border： border-left-style border-left-width border-left-color 等
margin： margin-left margin-top 等
③ 样式的设置，会被设置为“行内样式”
有则修改，无则添加
(复合属性样式可以直接进行设置操作，无需拆分为具体样式)

div样式获取操作：
在这里插入图片描述
样式设置：

4. value属性值快捷操作
$().attr(‘value’); //获取value值
$().attr(‘value’,信息值);//设置value值

快捷操作：
$().val(); //获得value属性值
$().val(信息值); //设置value属性的值
该val()方法在复选框、单选按钮、下拉列表的使用有卓越表现。
4.1 复选框操作
① 获得被选中复选框的value属性值
② 设置默认情况下哪个复选框被选中
获取选中复选框的value属性值：
在这里插入图片描述
设置复选框默认选中项目：

4.2 下拉列表操作
① 获取选中项目的value值
② 设置默认选中项目

下拉列表的获取和设置操作：
在这里插入图片描述

4.3 单选按钮操作
单选按钮获取和设置操作：

5. 复选框操作
全选、反选、全不选
$().attr(‘checked’,true); //设置复选框选中
$().attr(‘checked’,false); //取消复选框选中
$().attr(‘checked’); //判断复选框选中情况，返回布尔值
在这里插入图片描述