操作 DOM

首页 > 代码库 > 操作 DOM

2024-09-29 17:26:39 215人阅读

1、非类属性

id rel title属性，jQuery提供了 attr（）和removeAttr（）。 ——.attr({rel:‘external‘}); .attr({ rel:‘external‘,title:‘learn more at wikipedia‘)}//多项和css一样中间用“，”分隔。

　　关于值回调 —— 例子：

 id: function(index, oldValue){
  return ‘ wikilink- ‘+ index ;
}

每次出发值回调，都会给他传入两个参数。第一个是一个整数（index），表示迭代次数（第几次执行从0开始），我们再次利用第一个只为第一个链接生成的id是wikilink-0

为第二个链接生成的id是wikilink-1，一次类推。代码中没有用到第二个参数（oldValue），这个参数中保存的是修改之前的属性值。　　

① 我们利用了值回调“上下文”。就想在事件处理程序中一样，在值回调函数中，this关键字指向每次调用回调时正在操作的那个DOM元素。再次我们把这个元素封装为jQuery对象，

这样就可通过.text（）方法来去的连接的文档内容。附加：我在下边代码中加入了CSS（）属性将文字颜色修改为黄色，因为我想着重提示词条。尝试中将.css().text()成功了而当.css()在后面时整个语句失效。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src=http://www.mamicode.com/"jquery-3.2.1.min.js"></script>
    <title></title>
</head>
<body>
<p>123456789<a> this this </a></p>
</body>
<script>
    $(‘p>a‘).attr({
        rel:‘external‘,
        id:function(index,oldValue){
            return ‘wikilink-‘+index;
        },
        title:function(){
            return ‘learn to about‘+$(this).css(‘color‘,‘yellow‘).text()+‘at wikipedia.‘;
        }
    })
</script>
</html>

如果有幸访问我的文章，希望你着重看下边这一块，因为我觉得思路比知识点要重要。

2、DOM元素属性

　　HTML属性与DOM属性有一点区别。HTML属性是指页面标记中放在引号中的值，而DOM属性则是指通过JavaScript能够存取的值。（几乎任何浏览器F12键，elements 所谓的开发人员工具）

大多数情况下，HTML属性与对应的DOM属性的作用是一样的，jQuery可以帮我们处理名字不一致的问题。可是，有时候我们的确需要留意着两种属性的差异。某些DOM属性，例如nodeName、nodeType、selectedIndex和childNodes，在HTML中没有对应的属性，因此通过.attr（）方法就没办法操作他们。

数据类型差异，比如HTML中的checked属性是一个字符串，而DOM中的checked属性则是一个布尔值。对于布尔指数型，最后是测试DOM属性而不是HTML属性，以确保跨浏览器的行为一致。

在jQuery中，可以通过.prop（）方法取得和设置DOM属性：

//取得checked属性的当前值

var currentlyChecked = $(‘.my-checkedbox‘).prop(‘checked‘);

//设置checked属性的值

$(‘.my-checkedbox‘).prop(‘checked‘,false);

.prop()方法与attr方法没什么不同，比如热门都可以一次性接受一个包含多个值的对象，也支持值的回调函数。

3、表单控件

文本输入框的value属性在DOM中的属性叫defaultValue，DOM中就没有value属性。而选项列表select元素呢，其选项的值在DOM中通常是通过selectedIndex属性，或者通过其他选项元素的selected属性来取得。

由于存在这些差异，再去的和设置表单控件的值时，最好不要使用.attr()方法，而对于选项列表呢，最好连.prop()方法也不要使用。

.val()方法：

//获取输入框当前值

var inputValue = http://www.mamicode.com/$(‘#my-input‘).val();

//取得选项列表的当前值

var selectValue=http://www.mamicode.com/$(‘#my-select‘).val();

//设置单选列表值

$(‘#my-select‘).val(‘value3‘);

//设置多选项列表的值

$(‘#my-mulit-select‘).val([‘value1‘,‘value2‘]);

与.attr（）和.prop（）一样，.val()方法也可以接受一个函数作为其setter参数。

4、DOM树操作

　　.innerAfter()和.innerBefore()是在指定的元素外部插入新内容。

　　.prependTo()在现有元素内部、之前添加内容。

　　.appendTo()在现有元素内部、之后添加内容。

　　　　　　　　　　插嘴：sapn 为行内盒子。

　　　　①：包装元素

　　　　　　.wrapALL()和.wrap()（例子中用于包装脚注，用ol有序列表）、.each（jQuery）和.forEach（JavaScript）不得不说<sup></sup>和<sub></sub>

　　在移动原文之前插入脚注标号，不然无法找到原位置。

　　②：反向插入方法

$(‘<p>HEllo</p>‘).appendTo(‘#container‘);
和
$(‘#container‘).append(‘<p>Hello</p>‘)
效果一样

　　作用为方便jQuery连缀。值得研究。节省空间。

var str=‘a‘+‘b‘+‘c‘;
与
var str=[‘a‘,‘b‘,‘c‘].join(‘‘);
效果一样，当需要组合元素较多时，推荐使用第二种方法。

　　这里需要注意一点，在前一种方法中加法需要在（）内计算。而后一种方法中，数组的每个元素会分别执行，因此不需要保存在（）内。

6、复制元素

　　.clone()方法。这个方法能够创建任何匹配的元素集合的副本一边将来使用。（复制完需插入）

　　默认情况下不会复制匹配元素活其后代元素中绑定的事件。不过，可以为这个方法传递一个布尔值参数，将这个参数设置为true，就可以连同事件一起复制，及.clone（true）。

　 .html()方法。这个方法中不传递参数的情况下回返回这个匹配元素的HTML标记。而传入参数内容就会被替换掉。传入的HTML必须是有效的，而且需要对特殊字符进行转译。

　　‘&helip；’省略号。 .end()方法重新返回上一层。（在连缀中很好用）　　　　　　

　　.text()方法。可以取得匹配元素的内容，或者用心字符串替换匹配元素的内容。但是与.html（）不同的是，.text（）始终会取得或设置春文本内容。使其html标签都被忽略。类似于.text($(‘p‘).text())即为获取被选中内容的纯文本。

最后归类总结

（1）要在HTML中创建新元素，使用$()函数。

（2）要在每个匹配的元素中插入新的元素，使用：

　　.append()

　　.appendTo()

　　.prepend()

　　.prependTo()

（3）要在每个匹配的元素相邻的位置上插入新的元素，使用

　　.after()

　　.insertAfter()

　　.before()

　　.insertBefore()

（4）要在每个匹配的元素外部插入新的元素，使用

　　.wrap()

　　.wrapAll()

　　.wrapInner()

（5）要用新的元素或者文本替换每个匹配的元素，使用

　　.html()

　　.text()

　　.replaceAll()

　　.replaceWith()

（6）要移除每个匹配的元素中的元素，使用

　　.empty()

（7）要从文档中移除每个匹配的元素及其后代元素，但不实际删除他们，使用：

　　.remove()

　　.detach()

小知识点：

　　nodeName：

nodeName 属性指定节点的节点名称。

如果节点是元素节点，则 nodeName 属性返回标签名。

入股节点是属性节点，则 nodeName 属性返回属性的名称。

对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

　　nodeType：

nodeType 属性返回以数字值返回指定节点的节点类型。

如果节点是元素节点，则 nodeType 属性将返回 1。

如果节点是属性节点，则 nodeType 属性将返回 2。

Node Types

文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。

存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：

节点类型		描述	子节点
1	Element	代表元素	Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2	Attr	代表属性	Text, EntityReference
3	Text	代表元素或属性中的文本内容。	None
4	CDATASection	代表文档中的 CDATA 部分（不会由解析器解析的文本）。	None
5	EntityReference	代表实体引用。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6	Entity	代表实体。	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7	ProcessingInstruction	代表处理指令。	None
8	Comment	代表注释。	None
9	Document	代表整个文档（DOM 树的根节点）。	Element, ProcessingInstruction, Comment, DocumentType
10	DocumentType	向为文档定义的实体提供接口	None
11	DocumentFragment	代表轻量级的 Document 对象，能够容纳文档的某个部分	Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12	Notation	代表 DTD 中声明的符号。	None

节点类型 - 返回值

对于每种节点类型，nodeName 和 nodeValue 属性的返回值：

节点类型		nodeName 返回	nodeValue 返回
1	Element	元素名	null
2	Attr	属性名称	属性值
3	Text	#text	节点的内容
4	CDATASection	#cdata-section	节点的内容
5	EntityReference	实体引用名称	null
6	Entity	实体名称	null
7	ProcessingInstruction	target	节点的内容
8	Comment	#comment	注释文本
9	Document	#document	null
10	DocumentType	文档类型名称	null
11	DocumentFragment	#document 片段	null
12	Notation	符号名称	null

NodeTypes - Named Constants

NodeType	Named Constant
1	ELEMENT_NODE
2	ATTRIBUTE_NODE
3	TEXT_NODE
4	CDATA_SECTION_NODE
5	ENTITY_REFERENCE_NODE
6	ENTITY_NODE
7	PROCESSING_INSTRUCTION_NODE
8	COMMENT_NODE
9	DOCUMENT_NODE
10	DOCUMENT_TYPE_NODE
11	DOCUMENT_FRAGMENT_NODE
12	NOTATION_NODE

　　selectedIndex：

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

注释：若允许多重选择，则仅会返回第一个被选选项的索引号。

语法

selectObject.selectedIndex=number
　　

　　childNodes：

定义和用法

childNodes 属性返回节点的子节点集合，以 NodeList 对象。

提示：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。

关于parent（）和parents（）

实例

查找每个段落的带有 "selected" 类的父元素：

$("p").parent(".selected")

定义和用法

parent() 获得当前匹配元素集合中每个元素的父元素，使用选择器进行筛选是可选的。

.parent(selector)

参数	描述
selector	字符串值，包含用于匹配元素的选择器表达式。

详细说明

如果给定一个表示 DOM 元素集合的 jQuery 对象，.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素，并用匹配元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。

该方法接受可选的选择器表达式，与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器，则将通过检测元素是否匹配该选择器对元素进行筛选。

请思考这个带有基本的嵌套列表的页面：

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

如果我们从项目 A 开始，则可找到其父元素：

$(‘li.item-a‘).parent().css(‘background-color‘, ‘red‘);

此次调用的结果是，为 level-2 列表设置红色背景。由于我们未应用选择器表达式，父元素很自然地成为了对象的一部分。如果已应用选择器，则会在包含元素之前，检测元素是否匹配选择器。

操作 DOM

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 操作 DOM

操作 DOM

（5）要用新的元素或者文本替换每个匹配的元素，使用

Node Types

节点类型 - 返回值

NodeTypes - Named Constants

语法

定义和用法

实例

定义和用法

详细说明

看完仍有疑问？有类似问题直接问程序猿