在前端开发中，CSS选择器与原生JS操作DOM是非常重要的技能。本文将深入探讨非p元素及偶数位置p元素的选择方法，以及HTML的插入与删除操作。

谈谈如何选择非p元素。在CSS中，可以使用通用选择器结合否定伪类来实现。例如，要选择所有不是p元素的元素，可以使用 “*:not(p)” 选择器。这个选择器会匹配页面中除了p元素之外的所有元素，无论是div、span还是其他标签。在原生JS里，我们可以通过获取所有元素，然后过滤掉p元素。代码如下：

const allElements = document.getElementsByTagName('*');
const nonPElements = [];
for (let i = 0; i < allElements.length; i++) {
    if (allElements[i].tagName.toLowerCase()!== 'p') {
        nonPElements.push(allElements[i]);
    }
}

接着，探讨偶数位置p元素的选择。在CSS里，使用nth-of-type伪类可以轻松实现。 “p:nth-of-type(even)” 这个选择器会选中所有p元素中位置为偶数的元素。在原生JS中，我们可以先获取所有p元素，然后遍历筛选出偶数位置的元素。示例代码：

const pElements = document.getElementsByTagName('p');
const evenPElements = [];
for (let i = 0; i < pElements.length; i++) {
    if ((i + 1) % 2 === 0) {
        evenPElements.push(pElements[i]);
    }
}

再来说说HTML的插入与删除操作。插入操作可以使用多种方法。比如，使用原生JS的 document.createElement() 创建新元素，然后用 appendChild() 或 insertBefore() 将新元素插入到指定位置。示例：

const newDiv = document.createElement('div');
newDiv.textContent = '这是新插入的div';
const parentElement = document.getElementById('parent');
parentElement.appendChild(newDiv);

删除操作则可以使用 removeChild() 方法。先获取要删除元素的父元素，然后调用父元素的 removeChild() 方法删除指定元素。示例代码：

const elementToRemove = document.getElementById('elementToRemove');
const parent = elementToRemove.parentNode;
parent.removeChild(elementToRemove);

掌握CSS选择器与原生JS操作DOM的这些技巧，能够让我们在前端开发中更加高效地处理页面元素，提升页面的交互性与动态效果，为用户带来更好的体验。无论是处理复杂的页面布局，还是实现特定的功能需求，这些方法都将发挥重要作用。