js中dom查询代码,js dom操作

发布时间：2022-11-24

本文目录一览：

  1. 关于js中利用DOM动态改变CSS样式，请大神提供代码
  2. 用JS判断某页面中是否含有特定DOM的问题
  3. JS里面的DOM操作是什么
  4. js中提到的dom引用是什么意思
  5. [JS中怎样取得DOM 元素位置](#JS中怎样取得DOM 元素位置)
  6. [怎么样通过js DOM获取一个节点的文本内容？](#怎么样通过js DOM获取一个节点的文本内容？)

关于js中利用DOM动态改变CSS样式，请大神提供代码

代码如下：

!DOCTYPE html
html
head
meta charset="UTF-8"
titleTest/title
script src="" type="text/javascript" charset="utf-8"/script
style
*{
/*margin: 0px;
padding: 0px;*/
}
.test1{
width: 100%;
height: 22px;
line-height: 22px;
border: 2px solid #ccc;
}
/style
/head
body
div class="test1"公告内容/div
br /
button class="changestyle"更改样式/button
script
$(function(){
$(".changestyle").off("click").on("click",function(){
$(".test1").css({
"font-size":"16px",
"font-weight":"bold",
"border":"2px solid blue",
"width":"200px",
"height":"100px",
"text-align":"center",
"line-height":"100px",
"color":"red"
});
});
});
/script
/body
/html

望采纳！

用JS判断某页面中是否含有特定DOM的问题

那是因为 $('#a').has('p') 不管怎么样都返回一个对象，而对象转化为 Boolean 后为 true，所以你的判断会永远成立。可以改成如下方式：

if ($('#b').has('p').get(0)) {
    alert(1);
} else {
    alert(2);
}

JS里面的DOM操作是什么

DOM（即 Document Object Model）是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型
    其中，在 HTML DOM 中，所有事物都是节点。DOM 被视为节点树的 HTML。 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点
    HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。 DOM 处理中的常见错误是希望元素节点包含文本。 例如：<title>DOM 教程</title>，元素节点 title，包含值为 "DOM 教程" 的文本节点。 可通过节点的 innerHTML 属性来访问文本节点的值。

一些常用的 HTML DOM 方法：

  • getElementById(id) - 获取带有指定 id 的节点（元素）
  • appendChild(node) - 插入新的子节点（元素）
  • removeChild(node) - 删除子节点（元素）

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

DOM操作示例

<body>
    <p id="p1">Hello World!</p>
    <script>
        document.getElementById("p1").innerHTML = "New text!";
        // 内容变更为 new text
        document.getElementById("p1").style.color = "blue";
        // 蓝色
    </script>
</body>

js中提到的dom引用是什么意思

这两行代码要区分的是 DOM 对象和 jQuery 对象的区别。 DOM 对象和 jQuery 对象是两种不同的对象，它们的实例也因此具有不同的属性和方法。通常要操作页面中的节点，我们都需要想办法获取对该节点的引用。例如如下代码：

var dom = document.getElementById('节点id');

这是通过节点的 id 来获取一个页面节点，也就是对节点的引用。这个时候，我们对变量 dom 的任何操作，实际上就是对页面节点的操作，比如说修改样式、移除节点、获取属性等等。例如：

dom.style.display = 'none'; // 隐藏节点
dom.parentNode.removeChild(dom); // 删除节点
var height = dom.offsetHeight; // 获取节点高度

像上面的 style、parentNode、removeChild、offsetHeight 等等，都是 DOM 对象的属性或方法。 因为 DOM 对象不属于 JavaScript 的一部分，它是各个浏览器对 JavaScript 的扩展，但各个浏览器又都在实现上有一些不一致，导致 JavaScript 代码需要处理很多兼容性问题。为了解决这些兼容性问题，提高开发效率，jQuery 库就诞生了。 jQuery 解决了兼容性问题，再加上它的实现极其巧妙，因此得到了很多人的吹捧。以前有一点 JavaScript 基础的人，要写出稍微复杂些的特效，几乎都不可能，但因为 jQuery 的出现，类似显示隐藏、各种动画效果，都只需要简单的几行代码即可。有些人甚至觉得，jQuery 甚至都能替代 JavaScript。 但问题是，不了解基础的 JavaScript，在遇到问题、异常的时候，你就只能干瞪眼了。任何语言，框架和库都无法取代最基础的语法，而且框架和库也都是由最简单的语法丰富起来的。 jQuery 实际上可以说是一个大的类——JavaScript 实现的类。以一个简单的模型来说：

;(function(window, undefined){
    window.$ = window.jQuery = jQuery;
    // 定义jQuery类
    function jQuery(selector, content){
        content = content || document;
        var eles = content.querySelectorAll(selector);
        var len = eles.length;
        // 给jQuery对象添加长度属性
        this.length = len;
        // 方便获取dom对象，获取实例：jQuery('#id')[0];
        for(var i = 0; i < len; i++){
            this[i] = eles[i];
        }
    }
    // 扩展原型
    jQuery.prototype = {
        // 构造函数
        constructor : jQuery,
        // 根据索引获取dom对象
        get : function(index){
            return this[index];
        }
    }
})(window);

这是一段 jQuery 的模拟代码，你可以使用如下方式调用：

var jqObj = new jQuery('.class');

因为 jQuery 的特殊处理，写 jQuery 代码的时候不需要 new 即可用，但这里没有处理，所以需要加上 new 关键字。 上面返回的 jqObj，就是我定义的 jQuery 的一个对象，它是 jQuery 对象，已经不是 DOM 对象了。我可以写如下代码：

var dom = jqObj.get(1); // 获取jQuery对象中下标为1的DOM对象

然后变量 dom 就和之前的变量 dom 一样，可以使用 DOM 对象的属性和方法了。 但是，我们不能写下面的代码，否则它就会报异常：

jqObj.style.color = 'red';

因为 jQuery 对象的实例，根本就没有 style 这个属性。jQuery 也是一样的，jQuery 对象和 DOM 对象是两种不同的对象，它们的内部结构（比如上面的 get 方法是自定义的）也是不同的。当你把 jQuery 对象当做 DOM 对象使用时，你调用该对象的任何属性和方法，都有可能触发一个属性或方法未定义的异常，因为这个属性或方法确实不存在。 所以，如果你使用了 jQuery 库，那你就得在操作节点的时候，注意区分这个节点对象到底是 DOM 对象，还是 jQuery 对象。基本上 jQuery 的方法如果返回节点对象，返回值大多是 jQuery 对象，但也有例外，比如 get 等。 回到你的题目，通过 jQuery 获取的 canvas 对象，实际上是 jQuery 对象封装后的对象。它没有 getContext 方法，所以会报错。但 jQuery 对象可以像访问数组一样，通过中括号来获取对应的 DOM 对象，所以第二种返回了最原始的 Canvas 对象，它是具有 getContext 方法的。

JS中怎样取得DOM 元素位置

document.querySelector(domSelector).getBoundingClientRect();
// 获取dom元素的top, left, width, height, x, y, right, bottom

怎么样通过js DOM获取一个节点的文本内容？

首先 nextSibling 并不是所有浏览器执行后结果都是一样的！ 这是我写的：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <p>This is One</p>
    <p>This is Two</p>
    <script>
        var p = document.getElementsByTagName("p");
        p[1].innerHTML = "This is Change";
    </script>
</body>
</html>

我用一个变量接收整个页面有多少个 p 标签。 p 是一个数组，数组从 0 开始，我要操作第二个，就用 p[1] 来操作它。 这里，我改变了第二个 p 标签的值！

推荐文章