富文本编辑器开发系列7——常用`DOM API`

获取window

通常,我们在浏览器中,都是直接通过 window.xxx来直接使用window对象的,但是由于浏览器中的页面可能包含框架集,此时每一个框架集都是有一个window对象,那么如何准确获取我们需要的window对象呢?

如果页面包含多个框架(一般来说,每一个),那么每个框架都加载的是不同的文档,它们都有自己的 documet文档对象,在每个document对象上都有一个名为 defaultView的属性指向它所在的window,所以我们可以这样或取某个文档关联的 window:

var win = document.defaultView

如果该文档没有关联的对象,则会返回 null

但是日常开发中,我们往往首先拿到的是某个DOM节点而非document对象,那我们又如何判断该节点是属于页面中哪个document呢?

每一个节点都有一个只读属性 ownerDocument,通过该属性,就可以获取到它所属的document

var doc = node.ownerDocument;

节点相关的操作

获取下一个兄弟节点

node.nextSibling // 若不存在返回null

获取上一个兄弟节点

node.previousSibling

在某个子节点前插入一个新的子节点

node.insertBefore(newNode, node)

在最后一个位置追加一个子节点

node.appendChild(newNode)

获取节点标签名

node.tagName

删除某一个子节点

node.removeChild(node)

// 未完,待补充

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 和 Vue 结合使用时,可以利用各种开源的富文本编辑器库来增强前端表单的编辑体验。Vue.js 提供了强大的组件化和虚拟 DOM 功能,使得构建富文本编辑器更加便捷。以下是一些常用的 Vue 富文本编辑器: 1. **Quill**: 一个流行的 JavaScript 富文本编辑器,它在 Vue 中可以轻松集成,提供了丰富的功能和定制选项。安装可以通过 npm 或 yarn,然后在 Vue 组件中使用 Quill 组件。 ```bash npm install @vue-quill-editor/vue-quill ``` 2. **Vue-Editor-Plus**: 这是一个轻量级的 Vue 友好的富文本编辑器,它结合了 CKEditor 和 Element UI 的优点。安装后,只需在 Vue 组件中导入并使用即可。 3. **Vueditor**: 这是一个基于 TinyMCE 的富文本编辑器,提供了完整的 Vue API,适合对性能要求较高的场景。 4. **Vue-Strap-Editor**: 基于 Bootstrap 的富文本编辑器,适合需要与 Bootstrap 集成的项目。 要使用这些编辑器,你需要在你的 Vue 组件中注册组件,配置编辑器选项,并处理用户输入或事件。例如: ```html <template> <quill-editor v-model="content" :options="editorOptions"></quill-editor> </template> <script> import QuillEditor from 'vue-quill-editor' export default { components: { QuillEditor, }, data() { return { content: '', editorOptions: { modules: { toolbar: [ ['bold', 'italic', 'underline', 'strike'], // 格式按钮 ['blockquote', 'code-block'], // 代码块 [{ 'header': 1 }, { 'header': 2 }], // 标题 [{'list': 'ordered'}, {'list': 'bullet'}], // 列表 [{'script': 'sub'}, {'script': 'super'}], // 字体样式 [{'indent': '-1'}, {'indent': '+1'}], // 缩进 [{ 'direction': 'rtl' }], // 文本方向 ] }, theme: 'snow', // 可选主题 } } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值