js中dom查詢代碼,js dom操作

本文目錄一覽：

• 1、關於js中利用DOM動態改變CSS樣式，請大神提供代碼
• 2、用JS判斷某頁面中是否含有特定DOM的問題
• 3、JS裡面的DOM操作是什麼
• 4、js中提到的dom引用是什麼意思
• 5、JS中怎樣取得DOM 元素位置
• 6、怎麼樣通過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 Mode) 是 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 處理中的常見錯誤是希望元素節點包含文本。

舉個栗子：titleDOM 教程/title，元素節點 title，包含值為 “DOM 教程” 的文本節點。

可通過節點的 innerHTML 屬性來訪問文本節點的值。

一些常用的 HTML DOM 方法：

getElementById(id) – 獲取帶有指定 id 的節點（元素）

appendChild(node) – 插入新的子節點（元素）

removeChild(node) – 刪除子節點（元素）

一些常用的 HTML DOM 屬性：

innerHTML – 節點（元素）的文本值

parentNode – 節點（元素）的父節點

childNodes – 節點（元素）的子節點

attributes – 節點（元素）的屬性節點

DOM操作示例

html

    body

        p id=”p1″Hello World!/p

        script

            document.getElementById(“p1″).innerHTML=”New text!”;

            //內容變更為new text

            document.getElementById(“p1″).style.color=”blue”;

            //藍色

        /script

    /body

/html

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，而且在各個前端學習的站點、博客中，也是將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 並不是所有瀏覽器執行後 結果都是一樣的！

這是我寫的：

html

head

meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″

titleDocument/title

/head

body

pThis is One /p

pThis is Two /p

script

var p = document.getElementsByTagName(“p”);

p[1].innerHTML= “This is Change”;

/script

/body

/html

我用一個變量接收整個頁面有多少個p標籤

然p是一個數組 數組從0開始 我要操作第二個 我就p[1] 來操作他

這裡 我改變了第二個p標籤的值 ！